border-radius版本:CSS3继承性:无
语法:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
默认值:0
取值:
- <length>:
- 用长度值设置对象的圆角半径长度。不允许负值
- <percentage>:
- 用百分比设置对象的圆角半径长度。不允许负值
说明:
- 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个,将用于全部的于四个角。
- 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
- 垂直半径也遵循以上4点。
- 对应的脚本特性为borderRadius。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 墨绿 = 部分支持
- 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
较早版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50 |
较新版本 | 9.0 |
示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>border-radius_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时:</h2>
<ul class="test">
<li class="one">提供1个参数<br />border-radius:10px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时:</h2>
<ul class="test2">
<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>