CSS画基本图形——圆
浏览数：16 /
时间：2015年06月09日
#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;
}
这样可以画出一个中间是空的圆：
.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;
}
.png)
说明（二）：
从上面的例子可以看出，border-radius 圆弧的边界是 border 的外层，因此 border 的厚度越大，最后的圆会越来越不圆，当 border 的厚度大于等于 border-radius 时，border-radius 的圆心 在 比border 中，这时候就不能改变块级元素的形状了。
另外 border 厚度越来越大的话会把块级元素“挤”到其父级元素外面去，因为父级元素下面的子元素的位置与margin有关，而 border 外才是margin
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
