Plump mole

导航

css3属性border-radius

css3通过border-radius制作圆角有很多好处，最实用的莫过于，提高网站的性能，少了对图片进行http的请求，网页的载入速度将变快。

在CSS3中制作圆角的属性border-radius的具体用法：

具体的语法是:

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

取值可以是小数或者整数，不能为负数。

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只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀。

<!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>shape</title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1" />
 7         <style>
 8         *{margin:0;padding:0;float:left;}
 9             #egg {
10                display:block;
11                width: 126px;
12                height: 180px;
13                background-color: #008B8B;
14                -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
15                border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
16             }
17             
18         </style>
19     </head>
20     <body>
21         <div id='egg'>
22         </div>
23     </body>
24 </html>
View Code

此示例中添加了从左上到右下四个角的水平半径和垂直半径中所有的值，顾可以成为一个椭圆。

display:block;
                width:100px;
                height:100px;
                background-color:#008B8B;
                -webkit-border-radius:100px;
                border-radius:100px;
                -moz-border-radius: 100px;
View Code

此时添加了一个值，测上左，上右，下右，下左四个值相等，会变成一个圆形。

display:block;
                width:100px;
                height:100px;
                background-color:#008B8B;
                -webkit-border-radius: 100px 50px;
                -moz-border-radius: 100px 50px;
                border-radius:100px 50px;

添加两个值是，上左=下右为第一个值，上右=下左为第二个值

 

position:absolute;
				left:20px;
				top:20px;
				display:block;
				width:100px;
				height:100px;
				background-color:#008B8B;
				-webkit-border-radius:10px 80px 30px;
				-moz-border-radius:10px 80px 30px;
				border-radius:10px 80px 30px;

　　添加三个值 左上为第一个值，右上=下左为第二个值，下右为第三个值

position:absolute;
				left:20px;
				top:20px;
				display:block;
				width:100px;
				height:100px;
				background-color:#008B8B;
				-webkit-border-radius:10px 50px 30px 15px;
				-moz-border-radius:10px 50px 30px 15px;
				border-radius:10px 50px 30px 15px;

 

添加四个值，取值顺序为左上，右上，右下，左下，

border-radius支持img，和table还是有问题的。，border-radius的宽度必须大于border的宽度才能让和模型内侧也显示圆角。

相关详细信息请查看：http://www.w3cplus.com/node/48

posted on 2015-03-26 16:59  Plump mole  阅读(163)  评论(0)    收藏  举报