首页 >web前端 >html教程 >简单谈谈自己对htm与css中画圆的理解。_html/css_WEB-ITnose

简单谈谈自己对htm与css中画圆的理解。_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:22:191033浏览

      近几天,在利用css编辑中,发现不少边框图像要求是矩形圆角或者直接画一个圆的例子,下面和大家一起分享下对画圆的看法。

     在这次的分享中,我侧重给大家看一些例子来更好的理解,

     我们都明白,画圆时要用到“border-radius:”,而且在每次画圆时,我们都应该先设定一个width和height。

    那么我们可以这样理解,

     我们的圆是在一个矩形(正方形)中进行裁剪的,而border-radius就是我们要裁剪的尺寸。

     给大家一些图片,更好的去理解。

    首先,我们设定一个width为100px,高度为100px的正方形,设置为红色背景,如下

     接下来,我们在后面添加

     border-radius:50px 0 0 0;效果如下:

     border-radius:50px 50px 0 0;效果如下:

     border-radius:50px 50px 50px 0;效果如下:

     border-radius:50px 50px 50px 50px;效果如下:

 

     通过上述一步一步添加代码,图片一步一步的改变,我理解出如下:

     border-radius:0 0 0 0;

     四个值中,第一个值为矩形左上角的圆形半径(1/4的圆);

                   第二个值为矩形右上角的圆形半径(1/4的圆);

                   第三个值为矩形右下角的圆形半径(1/4的圆);

                   第四个值为矩形左下角的圆形半径(1/4的圆);

     并且,他们是在矩形的边界上进行半径取值,再确定圆心的(这就可以完成矩形圆角,通过改变半径来实现。)

 

     以上就是我对border-radius的理解,有哪些不对的地方,欢迎大家评点。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn