CSS画基本图形——圆

        #cicle {
            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;
        }

这样可以画出一个中间是空的圆：

 

说明（一）：

     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;
        }

 

说明（二）：

     从上面的例子可以看出，border-radius 圆弧的边界是 border 的外层，因此 border 的厚度越大，最后的圆会越来越不圆，当 border 的厚度大于等于 border-radius 时，border-radius 的圆心 在 比border 中，这时候就不能改变块级元素的形状了。

     另外 border 厚度越来越大的话会把块级元素“挤”到其父级元素外面去，因为父级元素下面的子元素的位置与margin有关，而 border 外才是margin