CSS3的border-radius属性画出圆圈效果（border-width带值）

我们知道border-radius可以画出圆的效果，但是，border-radius的半径若小于border的厚度，则边框内部就不具有圆角效果

如：

代码为：

div#circle { 
width: 100px; 
height: 100px; 
background-color: #efefef; 
border: 50px #a72525 solid; 
-webkit-border-radius: 30px; 
}

若将半径改成比边框厚度大一点点效果为：

代码为：

div#circle{ 
width: 100px; 
height: 100px; 
background-color: #efefef; 
border: 30px #a72525 solid; 
-webkit-border-radius: 40px; 
}

为什么第一个的内部没有圆角效果呢？因为内半径的大小等于外径值减去边框厚度值，当他们的值为负时，内径默认为0(因为border-radius不能为负值哦！)。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

若需要画出圆圈的效果，则需要内部边框是个圆，外部边框也是个圆。当border值为0或非常小的时候，width小于等于2*r的时候能得到圆。比如：

div#circle1
{
text-align:center;
border:1px solid #a1a1a1;
background:#dddddd;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}

效果如下：

又如：

div#circle1
{
text-align:center;
border:1px solid #a1a1a1;
background:#dddddd;
width:150px;
height:150px;
-moz-border-radius:100px; 
-webkit-border-radius:100px;
border-radius:100px;
}

效果如下：

但是，border厚度值我们不能忽略的时候，这个规则就失效了。

border厚度值，会使圆存在外半径和内半径（图丑不要吐槽啊~~）

  

 代码为：

div#circle2 { 
width: 80px; 
height: 80px; 
background-color: #efefef; 
border: 20px #a72525 solid; 
-webkit-border-radius: 60px; 
}

内半径的大小等于 外径值减去边框厚度值。

这个时候，我们就应该使得，r外一定要大于等于width+2*(border-width)的一半，r内一定要大于等于width的一半。即上例中，-webkit-border-radius的设值至少为 （80+20*2）/2=60，以上其他参数保持不变，-webkit-border-radius的设值为60 或者为大于60的70、80、90。。。。效果都是一样的。

以上这些，大部分是小鱼自己总结的，有错之处请指出，大家一起学习。