CSS3的圆角属性border-radius学习记录之实例详解

在css2.0中，在圆角的制作时候，都是用圆角背景图片来做，当时我使用的就是用四个空标签使用圆角背景图，然后定位到相应的位置去实现，现在有了css3的Border-radius方便了很多。
使用css3的Border-radius，不仅可以减少图片的制作，更新维护也更方便了，而且相对来说也可以提高网站的性能。

语法

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

取值：

<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> //左下角
<length> <length>中第一个值是圆角水平半径，第二个值是垂直半径。

说明：

border-radius是一种缩写方法。
第一个值是水平半径。第二个是垂直半径，如果第二个值没有设置，那么水平和垂直半径相等。
border-radius的四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置
如果只有一个值,如：border-radius:5px。那么top-left、top-right、bottom-right、bottom-left都相等，就是四边的圆角一样。
如果有2个值,如：border-radius:5px 4px。top-left与 bottom-right相同为5px。top-right 则与bottom-left相同为4px。
如果有3个值 如：border-radius:5px 4px 3px。 top-left为5px, top-right则与bottom-left相同为4px。那么bottom-right为3px。
如果有4个值 如：border-radius:5px 4px 3px 2px。 top-left为5px； top-right为4px；bottom-left为3px；那么bottom-right为2px。

浏览器兼容

目前IE9+、Firefox 4+、Google Chrome 10.0+ 、 Opera 支持 border-radius 属性。ie8和ie8以下的不支持此属性。
对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，Mozilla内核需要加上“-moz”，Webkit内核需要加上“-webkit”等比如：-moz-border-radius；-webkit-border-radius。ie9下没有私有属性，直接使用border-radius。
那么通常我们就需要这样写：
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;

下面来看具体的例子：
demo公用样式css:
.border-com{
    width:200px;
    height:80px;
    background:#eee;
}

  一、水平半径和垂直半径相等时  

1、一个值：border-radius:5px

等价于：
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;
   border-bottom-left-radius:5px;
html：
<div class=”border-com demo”></div>
css:

.demo{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:2px solid #f60;
}

效果：

2、2个值：border-radius:10px 5px
等价于：
    border-top-left-radius:10px;
    border-top-right-radius:5px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:5px;
html：
<div class=”border-com demo1″></div>
css: 

.demo1{
    -moz-border-radius:10px 5px;
    -webkit-border-radius:10px 5px;
    border-radius:10px 5px;
    border:2px solid #f60;
}

效果：

  3、3个值：border-radius:20px 10px 5px
等价于：
    border-top-left-radius:20px;
    border-top-right-radius:10px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:10px;
html：
<div class=”border-com demo2″></div>
css: 

.demo2{
    -moz-border-radius:20px 10px 5px;
    -webkit-border-radius:20px 10px 5px;
    border-radius:20px 10px 5px;
    border:2px solid #f60;
}

效果：

4、4个值：border-radius:20px 10px 5px 3px
等价于：
    border-top-left-radius:20px;
    border-top-right-radius:10px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:3px;
html：
<div class=”border-com demo3″></div>
css: 

.demo3{
    -moz-border-radius:20px 10px 5px 3px;
    -webkit-border-radius:20px 10px 5px 3px;
    border-radius:20px 10px 5px 3px;
    border:2px solid #f60;
}

效果：

二、水平半径和垂直半径不同时

1、border-radius:20px / 10px;

水平半径为20px ,垂直半径为10px

等价于：
    border-top-left-radius:20px 10px;
    border-top-right-radius:20px 10px;
    border-bottom-right-radius:20px 10px;
    border-bottom-left-radius:20px 10px;
html：
<div class=”border-com demo4″></div>
css: 

.demo4{
    -moz-border-radius:20px / 10px;
    -webkit-border-radius:20px / 10px;
    border-radius:20px / 10px;
    border:2px solid #f60;
}

效果：

2、border-radius:20px 15px 10px 5px / 12px 8px 4px 2px;

等价于：
    border-top-left-radius:20px 12px;
    border-top-right-radius:15px 8px;
    border-bottom-right-radius:10px 4px;
    border-bottom-left-radius:5px 2px;
html：
<div class=”border-com demo5″></div>
css: 

.demo4{
    -moz-border-radius:20px 15px 10px 5px / 12px 8px 4px 2px;
    -webkit-border-radius:20px 15px 10px 5px / 12px 8px 4px 2px;
    border-radius:20px 15px 10px 5px / 12px 8px 4px 2px;
    border:2px solid #f60;
}

效果：

 举一反三，大家可以还可以做出更多的效果。

三、特别例子

 1、当border-radius的半径值小于border边框的值的时候，下面看看是怎么情况

html：
<div class=”border-com demo6″></div>
css: 

.demo6{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:12px solid #f60;
}

效果：

通过上面的例子我们发现，当border-radius的半径值小于border边框的值的时候，我们发现边框内部就没有圆角效果了。
这种情况那么是为什么？因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,所以内部是直角的，最前面我们讲过border-radius其值是不能为负值的。
以上的例子我们都设置了边框，当没有边框时就不存在这样的情况了。 
当我们把border-radius改大一点，我们再来看看：

 css: 

.demo7{
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:12px solid #f60;
}

效果：