我们知道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。。。。效果都是一样的。
以上这些,大部分是小鱼自己总结的,有错之处请指出,大家一起学习。