CSS圆角详解

Radius圆角属性最近项目的前度用到的也比较频繁。简单总结一下该属性用法。

语法：border-radius:length

Length:由浮点数字和单位标示符组成长度值，不能为负数。

 

 

1. Mozilla(Firefox,Flock等浏览器)

　　-moz-border-radius-topleft:                //左上角

　　-moz-border-radius-topright:              //右上角

　　-moz-border-radius-bottomright:      //右下角

　　-moz-border-radius-bottomleft:        //左下角

 

　　-moz-border-radius:                             //四个角

 

       2．WebKit(Safari,Chrome等浏览器)

      -webkit-border-top-left-radius:          //左上角

      -webkit-border-top-right-radius:        //右上角

　　  -webkit-border-bottom-left-radius:   //左下角

　　  -webkit-border-bottom-right-radius: //右下角

　　　- webkit -border-radius:                        //四个角

        3．Opera浏览器 和IE浏览器

　　   border-top-left-radius:          //左上角

border-top-right-radius:        //右上角

border-bottom-left-radius:   //左下角

border-bottom-right-radius: //右下角

　　   border-radius:                          //四个角

 

另外：border-radius:10px   20px;

等价于

　　　 border-top-left-radius:10px;

border-bottom-right-radius:10px;

border-top-right-radius:20px;

border-bottom-left-radius:20px;

 

例子：

Html:

<input type="text" name="search" class="search" />

Css:

.search{

box-sizing:border-box;

background:#1F1F1F;

border:1px solid #3A3A3A;

height:30px;

width:200px;

border-radius:15px;

color:#fff;

box-shadow:inset 0 1px 1px 2px rgba(0,0,0,.2);

}

效果：

 

例子2：

Html:

<div class="showbar"></div>

Css:

.showbar{

width:30px;

height:50px;

line-height:50px;

background:-moz-linear-gradient(top,#fff,#BCBCBD);

background:-webkit-linear-gradient(top,#fff,#BCBCBD);

 

-webkit-border-top-right-radius:30px;

-webkit-border-bottom-right-radius:30px;

border-right:5px solid #000;

border-bottom:5px solid #000;

border-top:5px solid #000;

}

效果：