border-radius 详解_border-radius使用详解1
如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，首先制作圆角图片的时间是省了，而且其还有多个优点：其一减少网站的维护的工作量，少了对图片的更新制作，代码的替换等等;其二、提高网站的性能，少了对图片进行http的请求，网页的载入速度将变快；其三增加视觉美观性。既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：
一、语法：
border-radius ：initial| <length>{1,4} [/ <length>{1,4} ]?
二、取值：
<length>：
1.由浮点数字和单位标识符组成的长度值。不可为负值。
三、说明：
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-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
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，那么这个角就不是圆角。
实例（4个角同步）：
一个值4个角
.block{ background: red; width: 200px; height: 200px; border-radius: 50%; transition: all ease 1s; }
实例 （对角设置）：
两个值对角
.block { background: red; width: 200px; height: 200px; border-radius: 0 55.5px; transition: all ease 1s; }
实例 （4个角单独设置）：
4个值，上右下左
.block { background: red; width: 200px; height: 200px; border-radius:10px 30px 50px 80px; transition: all ease 1s; }
实例 （8个角设置）：
HTML代码：
<div class="demo"></div>
为了更好的看出效果，我们给这个demo添加一点样式：
.demo { width: 150px; height: 80px; border: 2px solid #f36; background: #ccc; }
注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。
.demo { border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px; }
这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：
.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; }
四、兼容性
IE8以及一下版本浏览器不支持。
目前主流浏览器都支持border-radius,并且符合 w3c标准，如果不考虑ie8和一下版本浏览器，不需要考虑兼容性。
更多：
