CSS3之圆角制作

如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，首先制作圆角图片的时间是省了，而且其还有多个优点：其一减少网站的维护的工作量，少了对图片的更新制作，代码的替换等等;其二、提高网站的性能，少了对图片进行http的请求，网页的载入速度将变快;其三增加视觉美观性。既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么?有这么多，那我们就开始吧！

　　前面总结了一些CSS3中新有的一些选择器的用法，那么CSS3中的圆角应该怎么用呢?看完今天的介绍，大家对CSS3中的圆角有所收获哟。为什么CSS3中会添加圆角呢?在日常制作网站的时候通常会碰到圆角都会用CSS精灵来解决。在CSS3中，我们可以用圆角而不用CSS精灵解决，制作起来也节约了一些成本。

　　有了CSS3中的圆角以后，这让我们在制作中少用了很多图片，减少了很多http的请求，这样网页载入的速度很变得很快。既然CSS3的圆角这么好，接下来我们会从它的语法，用法，参数等各方面进行介绍。说了这么多，我们开始吧。

一、CSS3的语法

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

　　1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

　　2、border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值;top-right等于bottom-left，并且取第二个值

　　3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

　　4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

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

　二、CSS3的例子

　　1、用圆角画原型

CSS代码：

.box{  
    /* 基础样式 */  
    width:200px;height:200px;background:#3FF;  
    /* IE9及IE9以上版本和欧朋浏览器 */  
    border-radius:100px;  
    /*  
        如同: 
        border-top-left-radius: 100px; 
        border-top-right-radius: 100px; 
        border-bottom-right-radius: 100px; 
        border-bottom-left-radius: 100px; 
    */  
    /* 谷歌浏览器 */  
    -webkit-border-radius:100px;  
    /*  
        如同: 
        -webkit-border-top-left-radius: 100px; 
        -webkit-border-top-right-radius: 100px; 
        -webkit-border-bottom-right-radius: 100px; 
        -webkit-border-bottom-left-radius: 100px; 
    */  
    /* 火狐浏览器 */  
    -moz-border-radius:100px;  
    /*  
        如同: 
        -moz-border-top-left-radius: 100px; 
        -moz-border-top-right-radius: 100px; 
        -moz-border-bottom-right-radius: 100px; 
        -moz-border-bottom-left-radius: 100px; 
    */  
} 

HTML代码：

<div class="box"></div>

预览效果：

2、圆角应用1

CSS代码：

.box{  
    /* 基本属性 */  
    width:200px;height:200px;background:#3FF;  
    /* IE9及IE9以上版本和欧朋浏览器 */  
    border-radius:20px/40px;  
    /*  
        如同: 
        border-top-left-radius: 20px 40px; 
        border-top-right-radius: 20px 40px; 
        border-bottom-right-radius: 20px 40px; 
        border-bottom-left-radius: 20px 40px; 
    */  
    /* 谷歌浏览器 */  
    -webkit-border-radius:20px/40px;  
    /*  
        如同: 
        -webkit-border-top-left-radius: 20px 40px; 
        -webkit-border-top-right-radius: 20px 40px; 
        -webkit-border-bottom-right-radius: 20px 40px; 
        -webkit-border-bottom-left-radius: 20px 40px; 
    */  
    /* 火狐浏览器 */  
    -moz-border-radius:20px/40px;  
    /*  
        如同: 
        -moz-border-top-left-radius: 20px 40px; 
        -moz-border-top-right-radius: 20px 40px; 
        -moz-border-bottom-right-radius: 20px 40px; 
        -moz-border-bottom-left-radius: 20px 40px; 
    */  
} 

HTML代码：

<div class="box"></div>

预览效果：

3、圆角应用2

CSS代码：

/* 基本浏览器 */  
div{width:200px;height:200px;background:#063;}  
/* IE9及IE9以上版本和欧朋浏览器 */  
.box{border-radius:20px 40px;}  
/* 
等价于 
.box { 
  border-top-left-radius: 20px; 
  border-top-right-radius: 40px; 
  border-bottom-left-radius: 40px; 
  border-bottom-right-radius: 20px; 
} 
*/  
.box1{border-radius:20px 40px 80px;}  
/* 
等价于 
.box { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 40px; 
    border-bottom-right-radius: 80px; 
    border-bottom-left-radius: 40px; 
} 
*/  
.box2{border-radius:10px 20px 40px 80px;}  
/* 
等价于 
.box { 
    border-top-left-radius: 10px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 40px; 
    border-bottom-left-radius: 80px; 
} 
*/  
.box3{border-radius:10px 20px 40px 80px/5px 10px 20px 40px;}  
/* 
等价于 
.box { 
    border-top-left-radius: 10px 5px; 
    border-top-right-radius: 20px 10px; 
    border-bottom-right-radius: 40px 20px; 
    border-bottom-left-radius: 80px 40px 
} 
*/  
.box4 {  
  border-radius: 10px 20px 30px / 50px 60px;  
}  
/*      
等价于： 
         
.box4 { 
  border-top-left-radius: 10px 50px; 
  border-top-right-radius: 20px 60px; 
  border-bottom-left-radius: 20px 60px; 
  border-bottom-right-radius: 30px 50px; 
} 
*/ 

HTML代码：

<div class="box"></div>  
<div class="box1"></div>  
<div class="box2"></div>  
<div class="box3"></div>  
<div class="box4"></div>

预览效果：

对CSS3的研究还在继续，对CSS3圆角的研究还在继续，对未来的研究还在继续。现在CSS3的圆角能给大家带来一点帮助。关于CSS3选择器方面就介绍到这里，希望能对初次接触CSS3的朋友们有所帮助。