css之border-radius

 

css3之border-radius理解

 

 

 

　　在平常项目过程当中，border-radius这个属性算是很是经常使用的属性之一了，经过设置元素的border-radius值，能够轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各类圆角图形。

　　一般我在使用这个属性的时候，通常都是用在给div或者button加上一点圆角弧度，显得好看一点，或者用来画一个圆形div。用的稍微高级一点的，也就是用来画了一个右半圆来作为侧边栏的展开/收缩按钮，记得当时仍是刚刚开始学习前端不久，这个半圆怎么画仍是百度来的，并无深刻去研究为何这么设置就是这样一个形状。

　　

　　后来对border-radius的使用也是平平淡淡，无非就是加个圆角画个圆。今天写代码的过程当中，忽然对border-radius值的设置好像加深了一点理解，就多研究尝试了一下，下面整理一下border-radius的使用方法以及个人理解，若是有理解不对的地方，欢迎指正，相互学习。

　　1、border-radius使用

　　border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，咱们经常使用的有三种写法：

　　（1）仅设置一个值

　　第一种方法，应该是咱们最经常使用的一种状况了，经常使用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，便可给元素的四个边角设置统一的圆角弧度，例如：

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

 

 

 

1 #test2 {
2 　  border: 3px solid red;
3　　 height: 100px;
4 　　width: 100px;
5 　　border-radius: 53px;
6 }

 

 

 

 　　（2）设置四个方向的值

　　border-radius属性实际上是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，所以，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（ps：与padding和margin同样，各个数字之间用空格隔开）。

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

　　（3）省略部分值

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

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

 

 

 　　2、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 }

 

 

 　　3、border-radius完整结构形式（扩展了解一下，我的感受好像用不到）

 　　在W3C上查border-radius属性时，会发现上面描述的语法是这样的：

　　　　　　border-radius: 1-4 length|% / 1-4 length|%;

 　　这是什么意思呢，我也看不懂，后来百度了解到，这是border-radius的完整写法，咱们平时的写法其实都是简写，平时咱们写的border-radius : 50px，其实完整的写法应该是：

　　　　border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

 　　“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图

　　根据水平半径和垂直半径的值，能够造成一个椭圆或者圆形，而后再根据这个去给元素设置圆角的弧度。利用border-radius的完整属性表达方式，能够设置一些个性的圆角样式，以下图（随便举个例子）

　　以上，完结。

 ---------------------
做者：

吃火鸡的馒头