css3之border-radius理解

CSS3提供了5种圆角属性

border-radius ：同时设置4个边框的圆角样式。

border-top-left-radius ：设置左上角边框的圆角样式。

border-top-right-radius ：设置右上角边框的圆角样式。

border-bottom-left-radius ：设置左下角边框的圆角样式。

border-bottom-right-radius ：设置右下角边框的圆角样式。

示例：

这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序，如下图所示：

 

 

 

border-*-radius属性的值可分别设定水平半径和垂直半径；若省略垂直半径，则垂直半径默认采用水平半径的值。

而每个值，支持的单位有固定长度和百分比。若设置百分比格式，则水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

组合如下(以border-radius为例)：

1) border-radius:20px; // 表示圆角的水平半径和垂直半径都为20px长度。

2) border-radius:20px/40px; // 表示圆角的水平半径的长度为20px，垂直半径的长度为20px。

3) border-radius:20%; // 表示圆角的水平半径和垂直半径都为各自边框长度的20%。

4) border-radius:20%/30%; // 表示圆角的水平半径为边框宽度的20%，垂直半径都为边框高度的20%。

5) border-radius:20px/30%; // 表示圆角的水平半径长度20px，垂直半径都为边框高度的20%。

示例：

 

　与padding和margin一样，border-radius同样可以省略部分值，省略时同样是采用对角线相等的原则，例如：

1 #test3 {
2     border: 3px solid red;
3     height: 100px;
4     width: 200px;
5     border-radius: 50px 0px;
6 }

 

 

 　　二、border-radius数值设置及显示效果的理解

　　（1）使用px表示数值的情况

　　在使用px来表示圆角值的时候，圆角的弧度一般都是一个圆形的部分弧形，具体呈现的显示效果我是按如下方法与预估和理解的：

　　假设一个长200px，高150px的div对象，设置它的border-radius的值为30px，那么实际呈现的圆角，其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度，语言表达的可能不够透彻，看下面的例子应该可以明白。

 1 #test4 {
 2     height: 150px;
 3     width: 200px;
 4     border-radius: 30px;
 5     background-color: cornflowerblue;
 6 }
 7 #circle {
 8     width: 60px;
 9     height: 60px;
10     border-radius: 30px;
11     background-color: chartreuse;
12 }

 

1 <div id="test4">
2     <div id="circle"></div>
3 </div>

 

　　这么去理解以后，下次再需要绘制圆形、各个方向的半圆、四分之一圆的时候，再也不需要去百度或者记住什么宽和高的比例必须是1比2之类的了，想象一下，大概就能知道比例和数值该怎么去设置了。哈哈，感觉有点乱，也不知道我描述的内容，除了我自己，你能不能看懂。

 　　（2）使用%表示数值的情况

　　使用%来表示圆角值的时候，如果对象的宽和高是一样的，那判断方法与第一点一致，只不过想象的时候，需要将宽高乘以百分数换算一下；

　　如果宽高不一致，那产生的效果，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。

1 #test5 {
2     height: 100px;
3     width: 200px;
4     border-radius: 50%;
5     background-color: cornflowerblue;
6 }

 

 

 　　（3）需要注意的情况

 　　在设置对象为圆形的时候，如果使用了border、padding等情况时，对象的实际显示宽高已经不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，可能达不到预期的真正的圆形的效果。

　　如下面这个例子，给div加了10px的边框，但是border-radius仍是以100px的一半来设置的，显示出来的效果显然就不是一个真正的圆形。

1 #test6 {
2     height: 100px;
3     width: 100px;
4     border-radius: 50px;
5     border: 10px solid #CCCCCC;
6     background-color: cornflowerblue;
7 }

 

 

 　　可以通过设置百分比50%的方式来解决这一情况，或者计算一下实际的高度再来设置border-radius的数值。上面这个例子，div实际的宽高应该是100 + 10 * 2 = 120px，所以border-radius应该设置为60px。

1 #test7 {
2     height: 100px;
3     width: 100px;
4     border-radius: 60px;
5     border: 10px solid #CCCCCC;
6     background-color: cornflowerblue;
7 }