一 语法：
border-radius:none | <length>{1,4} [/ <length>{1,4}]?
二 说明：
border-radius是一种缩写方法。如果“/”前后都有值，则前面代表水平半径，后边代表垂直半径；如果没有“/”，则水平和垂直半径相等。另外四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。
上边是缩写形式，还可以将各个角单独拆分出来：
border-top-left-radius:<length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius:<length> <length> //右下角 border-bottom-left-radius: <lenght> <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”等，那么我为了能兼容各大内核的老版浏览器，故格式改为：
-moz-border-radius: none |{1,4} [/{1,4} ]? -webkit-border-radius: none |{1,4} [/{1,4} ]? border-radius: none |{1,4} [/{1,4} ]?
另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面
三 特殊应用
1.border-radius有一个内半径和外半径的区别，它主要是元素边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，内边框就不具有圆角效果，例如下面的例子：
.border-big{border:15px solid green;border-radius:15px;}
原因：border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。
2.如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。
.demo{border-width:10px 5px 20px 3px;border-radius:30px;}
效果：
3.相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例：
.demo{border-color:red green blue orange;border-width:15px30px30px80px;border-radius:50px;}
效果：
三 实例：
1.利用border-radius画圆： 1) 实心圆：高度和宽度相等，并将border的宽度设为高度和宽度的一半，代码及效果如下： #circle{width:200px;height:200px;background-color:#a72525;-webkit-border- radius:50%;border-radius:50%;}
2) 空心圆：和实心圆差不多，背景色设置为透明，而是设置border的颜色#circle{width:200px;height:200px;background-color:transparent;border:3px solid #a72525;-webkit-border-radius:50%;border-radius:50%;}
四 特例
border-radius能应用在各种元素中，但在img和table应用时会有点差别的，首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例：
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;时才能正常显示。
网友评论