CSS3属性Border-Radius详解[圆角]
qdgcs.co.cc前端攻城记又一讲。
上一次我们了解了css3的属性animation，这次我们回头看一下Border-Radius这个属性，这个属性目前被各大浏览器广泛支持，属于一个基本普及的属性。
支持情况如下：
下面我们来看一下它的使用方法
[css]
/*语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]? <length>： 由浮点数字和单位标识符组成的长度值。不可为负值。*/
.p1
{
border-radius: 15px;/*它的是border-radius: 15px/15px;的省略*/
}
[/css]
其实以上包括注释都还是border-radius的缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
1、border-radius: [ <length>{1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等
2、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值
3、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right
4、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left
现在我们来看一下更完整的写法，其实border-radius和border属性一样，还可以把各个角单独拆分出来，他们都是先Y轴在X轴，具体看下面：
border{
border-top-left-radius: <length> <length> /*左上角*/
border-top-right-radius: <length> <length> /*右上角*/
border-bottom-right-radius:<length> <length> /*右下角*/
border-bottom-left-radius:<length> <length> /*左下角*/
}
这里说一下，各角拆分出来取值方式：<length> <length>中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。请看图示：
我们来看一下综合写法
[css]
.demo { border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px; }
/*这个等同于*/
.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}
/*由此我们可以看到他们的对应关系*/
[/css]
这个例子的效果如图：
对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例
.border-big { border: 15px solid green; border-radius: 15px; }
效果：
我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：
.border-small { border: 15px solid green; border-radius: 25px; }
效果：
为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。
最后我们来说一下利用border-radius画一个圆，代码如下：
[css]
/*圆形*/
.p3
{
width: 100px;
height: 100px;
border: 2px solid orange;
/*比例知识：当宽高相等，border-radius属性设置为它们的一半市，我们就得到了一个圆形*/
border-radius:50px;
}
[/css]
最后我们看一下本章出现的部分实例 DEMO实例
最后感谢大家阅读，转载烦请注明出处 qdgcs.co.cc前端攻城记
