CSS画基本图形——圆
#cicle {
width: 100px;
height: 100px;
background-color: #000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
width: 100px;
height: 100px;
background-color: #000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
实验表明 border-radius 只要是大于 height 或width 的1/2就能成圆形
另外:
#circle{
height: 100px;
width: 100px;
border-radius: 100px;
border: 50px solid #f21;
}
height: 100px;
width: 100px;
border-radius: 100px;
border: 50px solid #f21;
}
这样可以画出一个中间是空的圆:
![](http://images0.cnblogs.com/blog2015/749243/201504/271117205529211.png)
说明(一):
border 的宽度不能超过 height 或width 的1/2,否则圆会越来越变形。
因此可以说明 : border-radius 是从 border 开始,随着 border-radius 增大,圆心逐渐向 块级元素的中点靠近,当 border-radius 等于 块级元素 height 或 width 的一半时,圆心和块级元素的中点重叠,此后再增大 border-radius 也不会有改变了。
当 border 宽度大的时候,就涉及到了 border-radius 圆弧的边界是 border 的外层还是内层的问题,如下面:
#circle{
height: 100px;
width: 100px;
border-radius: 50px;
border: 50px solid #f21;
background-color: #fff;
}
height: 100px;
width: 100px;
border-radius: 50px;
border: 50px solid #f21;
background-color: #fff;
}
![](http://images0.cnblogs.com/blog2015/749243/201504/271117275054021.png)
说明(二):
从上面的例子可以看出,border-radius 圆弧的边界是 border 的外层,因此 border 的厚度越大,最后的圆会越来越不圆,当 border 的厚度大于等于 border-radius 时,border-radius 的圆心 在 比border 中,这时候就不能改变块级元素的形状了。
另外 border 厚度越来越大的话会把块级元素“挤”到其父级元素外面去,因为父级元素下面的子元素的位置与margin有关,而 border 外才是margin