border-radius

版本：CSS3

CSS属性border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个简写属性，是为了将这四个属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和border-bottom-left-radius简写为一个属性。

• 即使元素没有边框，圆角也可以用到background上面，具体效果受background-clip影响。
• 当border-collapse的值为collapse时，border-radius属性不会被应用到表格元素上。

例如:

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

浏览器支持

语法

• 设置或检索对象使用圆角边框。提供2个参数，以“/”分隔。
• 第1个参数表示圆角的水平半径，第2个参数表示圆角的垂直半径。若第2个参数省略，则默认其值等于第1个参数的值。
• 水平半径（或垂直半径）允许设置1~4个参数值。

水平半径（或垂直半径）参数值

• 如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
• 如果提供三个参数值，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
• 如果提供两个参数值，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
• 如果只提供一个参数值，将用于全部的于四个角。

取值：

：取值 |

• ：定义圆形半径或椭圆的半长轴，半短轴。负值无效。
• ：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半径值是相对于盒模型的宽度值的百分比；垂直半径值是相对于盒模型的高度值的百分比。负值无效。
• inherit：表示四个值都从父元素计算值继承。

例子

border: solid 10px;
/* the border will curve into a 'd' */  
border-radius: 10px 40px 40px 10px;

border: groove 1em red;  
border-radius: 2em;

background: gold;
border: ridge gold;
border-radius: 13em/3em; 

border: none;
border-radius: 40px 10px; 

border: none;
border-radius: 50%; 

p{
 width:100px;
 height:100px;
 line-height:100px;
 text-align:center;
 border:1px solid #ed28bb;
 border-radius:10px 54px 20px;
}

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com