关于圆角详解

基本语法：

　　border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值范围：

　　<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

简单说明：

　　border-radius 是一种缩写方法。若是“/”先后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。若是没有“/”，则水平和垂直半径相等。另 外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

　　一、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

　　二、有两个值，那么 top-left 等于 bottom-right，而且取第一个值；top-right 等于 bottom-left，而且取第二个值

　　三、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 而且他们会相等,第三个值是设置 bottom-right。

　　四、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

　　前面，咱们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性同样，还能够把各个角单独拆分出来，也就是如下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：

1 2 3 4

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，那么这 个角就不是圆角。

　　border-radius 只有在如下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 须要根据不一样的浏览器内核添加不一样的前缀，比说 Mozilla 内核须要加上“-moz”，而 Webkit 内核须要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，咱们看看 border-radius 在不一样内核浏览器下的书写格式：

　　一、Mozilla(Firefox, Flock等浏览器)

1 2 3 4

-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角  -moz-border-radius-bottomleft: //左下角

　　等价于：

1	-moz-border-radius: //简写

　　二、WebKit (Safari, Chrome等浏览器)

1 2 3 4

-webkit-border-top-left-radius:  //左上角 -webkit-border-top-right-radius:  //右上角 -webkit-border-bottom-right-radius:  //右下角 -webkit-border-bottom-left-radius:  // 左下角

   等价于：

1	-webkit-border-radius:  //简写

　　三、Opera浏览器：

1 2 3 4

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角

  等价于：

1	border-radius: //简写

　　四、Trident (IE)

　　IE9 如下版本不支持 border-radius，并且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是同样的，这里就不在重复。

　　为了避免管是新版仍是老版的各类内核浏览器都能支持 border-radius 属性，那么咱们在具体应用中时须要把咱们的 border-radius 格式改为：

1 2 3

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

　　其拆分开来的格式相应须要加上 -moz 和 -webkit，上面的代码其实就等价于下面的代码：

1 2 3 4 5 6 7 8 9 10 11 12

-moz-border-radius-topleft: <length> <length> //左上角 -moz-border-radius-topright: <length> <length> //右上角 -moz-border-radius-bottomright: <length> <length> //右下角 -moz-border-radius-bottomleft: <length> <length> //左下角 -webkit-border-top-left-radius:  <length> <length> //左上角 -webkit-border-top-right-radius:  <length> <length> //右上角 -webkit-border-bottom-right-radius: <length> <length> //右下角 -webkit-border-bottom-left-radius:  <length> <length> // 左下角 border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius: <length> <length> //右下角 border-bottom-left-radius: <length> <length> //左下角

　　另外须要特别注意的是，border-radius 必定要放置在 -moz-border-radius 和 -webkit-border-radius 后面，（特别声明：本文中所讲实例都只写了标准语法格式，若是你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在 border-radius 前面加上相应的内核前缀，在实际应用中最好加上各类版本内核浏览器前缀。）

　　咱们初步来看一个实例，HTML代码：

1	<div class="demo"></div>

　　为了更好的看出效果，咱们给这个demo添加一点样式：

1 2 3 4 5 6

.demo {   width: 150px;   height: 80px;   border: 2px solid #f36;   background: #ccc; }

　　注：如无特殊声明，本文实例全部基本代码格式如上所示，只在该元素上添加border-radius属性设置。

1 2 3

.demo {   border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px; }

　　这种写法咱们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。为了能让你们更清楚理解，咱们把上面代码换成以下：

1 2 3 4 5 6

.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; }

　　不仿看看他们的效果：

　　

　　3、支持的浏览器：

　　

　　上面咱们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，下面咱们经过实例来介绍其具体的用法：

　　一：border-radius只有一个取值时，四个角具备相同的圆角设置，其效果是一致的：

1 2 3

.demo {   border-radius: 10px; }

其等价于：

1 2 3 4 5 6

.demo{  border-top-left-radius: 10px;  border-top-right-radius: 10px;  border-bottom-right-radius: 10px;  border-bottom-left-radius: 10px; }

　　效果：

　　

　　二：border-radius设置两个值，此时top-left等于bottom-right而且他们取第一个值；top-right等于bottom-left而且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同

1 2 3

.demo {   border-radius: 10px 20px; }

　　等价于：

1 2 3 4 5 6

.demo {   border-top-left-radius: 10px;   border-bottom-right-radius: 10px;   border-top-right-radius: 20px;   border-bottom-left-radius: 20px; }

　　效果：

　　

　　三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left而且他们取第二个值，bottom-right取第三个值：

1 2 3

.demo {   border-radius: 10px 20px 30px; }

　　等价于：

1 2 3 4 5 6

.demo {   border-top-left-radius: 10px;   border-top-right-radius: 20px;   border-bottom-left-radius: 20px;   border-bottom-right-radius: 30px; }

　　效果：

　　

　　四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值：

1 2 3

.demo {   border-radius:10px 20px 30px 40px; }

　　等价于：

1 2 3 4 5 6

.demo {  border-top-left-radius: 10px;  border-top-right-radius: 20px;  border-bottom-right-radius: 30px;  border-bottom-left-radius: 40px; }

　　效果：

　　

　　从上面四个实例中咱们能够看出border-radius和border取值很是类似，咱们border遵循TRBL原则（从上边右边下边左边 分别对应一、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2， 右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.

　　上面四个实例都是水平和垂直半径相等状况下border-radius的应用，下面咱们来看几个水平和垂直半径值不同的实例：

　　1、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，一样垂直半径指定了元素的垂直半径值，此时四个角具备相同的效果，由于他们具备相同的值：

1 2 3

.demo {   border-radius: 10px / 20px; }

　　等价于： 

1 2 3 4 5 6

.demo {   border-top-left-radius: 10px 20px;   border-top-right-radius: 10px 20px;   border-bottom-right-radius: 10px 20px;   border-bottom-left-radius: 10px 20px; }

　　效果：

　　

　　此时咱们每一个角不在是四分之一圆了，前面咱们也说过，只有水平和垂直半径值相同时，他们才具备四分之一圆特性，这样一来，咱们能够改变不一样的半径值，制做一些特殊的图形效果，感兴趣的朋友能够本身在本地尝试一下各类不一样的设置方式。

　　2、border-radius: 水平1 水平2 / 垂直1  垂直2：设置了两个水平值和两个垂直值，此时咱们top-left和bottom-right具备相同的水平和垂直半径，也就是其中的水平1和垂直1；而 top-right和bottom-left也具备相同的水平和垂直半径值，也就是水平2和垂直2，咱们他拆分出来就是：

1 2 3 4

border-top-left-radius: 水平1  垂直1； border-bottom-right-radius: 水平1  垂直1； border-top-right-radius: 水平2  垂直2； border-bottom-left-radius: 水平2  垂直2;

　　具体咱们来看下面的实例：

1 2 3

.demo {   border-radius: 10px 20px / 20px 10px; }<em id="__mceDel" style="font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5;">　</em>

　　等价于：

1 2 3 4 5 6

.demo {   border-top-left-radius: 10px 20px;   border-bottom-right-radius: 10px 20px;   border-top-right-radius: 20px 10px;   border-bottom-left-radius: 20px 10px; }

　　效果：

　　

　　上面两种都是相互对应的取值，咱们来看一个实例，水平有三个取值，而 垂直只有两个取值：

1 2 3

.demo {   border-radius: 10px 20px 30px / 50px 60px; }

　　等价于：

1 2 3 4 5 6

.demo {   border-top-left-radius: 10px 50px;   border-top-right-radius: 20px 60px;   border-bottom-left-radius: 20px 60px;   border-bottom-right-radius: 30px 50px; }

　　效果：

　　

　　咱们从上面等价代码中能够知道，无论他们怎么取值，“/”先后各自按TRBL顺序取值。

　　上面几种都是咱们常见的一些应用，那下面咱们来看几种特殊点的应用：

　　1、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当咱们border-radius半径值小于或等于border的厚度时，咱们边框内部就不具备圆角效果,例以下面的实例：

1 2 3 4

.border-big {    border: 15px solid green;    border-radius: 15px; }

　　效果：

　　

　　咱们接着上面这个例子，把 border-radius半径值改为比边框值大一点：

1 2 3 4

.border-small {    border: 15px solid green;    border-radius: 25px; }

　　效果：

　　

　　为什么当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，由于咱们的border-radius的内 径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明 border-radius的内外曲线的圆心并不必定是一致的。只有当边框厚度为0时，咱们内外曲线的圆心才会在同一位置。

　　2、若是角的两个相邻边有不一样的宽度，那么这个角将会从宽的边平滑过分到窄的边。其中一条边甚至能够是0。相邻转角是由大向小转。

1 2 3 4

.demo {   border-width: 10px 5px 20px 3px;   border-radius: 30px; }

　　效果：

　　

　　3、相邻两条边颜色和线条样式不一样时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。好比，两条边宽度相同，这个点就 是一个45°的角上，若是一条边是另一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是链接在内外曲线上的两个点的直线。咱们来看一 个四边颜色不同，宽度不同的实例：

1 2 3 4 5

.demo {   border-color: red green blue orange;   border-width: 15px 30px 30px 80px;   border-radius: 50px; }

　　效果：

　　

　　上面这几种是比较特殊点的用法，若是你们还想经过border-radius制做更多不一样形状，或者更多的应用，能够点击这里。

　　border-radius能应用在各类元素中，但在img和table应用时会有点差异的，首先先来看图片上应用border-radius 时的状况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其余浏览器都不能对图片进行剪切，咱们先来看一 个实例：

1 2 3 4

img {   border: 5px solid green;   border-radius: 15px; }

　　咱们来看其在各浏览器下的效果：

　　

　　左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，咱们能够看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图同样效 果，若是须要达成一致效果，你们就必须放弃border-radius而采用CSS2制做圆角的老办法。另外table的样式属性border- collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

1 2 3 4 5 6

table {   border-collapse: collapse;   border: 2px solid red;   background: green;   border-radius: 15px; }

　　效果：