border-top-right-radius
语法
- border-top-right-radius:[ <length> | <percentage> ]{1,2}
- 默认值:0
- 适用于:所有元素
- 继承性:无
- 动画性:是
- 计算值:指定值
取值
- <length>:用长度值设置对象的右上角(top-right)圆角半径长度。不允许负值
- <percentage>:用百分比设置对象的右上角(top-right)圆角半径长度。不允许负值
说明
设置或检索对象的右上角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
- 如设置border-top-right-radius:5px 10px表示top-right这个角的水平圆角半径为5px,垂直圆角半径为10px。
- 对应的脚本特性为borderTopRightRadius。
兼容性
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0-12.0 -moz- #1 #2 |
4.0-43.0 -webkit- |
3.1-8.1 -webkit- |
10.5-28.0 -webkit- |
3.2-8.1 -webkit- |
2.1-4.4.4 -webkit- |
18.0-40.0 -webkit- |
9.0+ | 4.0+ | 5.0+ | 5.0+ | 10.5+ | 4.0+ | 2.2+ | 18.0+ |
- Firefox从13.0开始移除对-moz-的支持,仅支持标准的border-radius写法,在4.0-12.0区间,两种方式都支持。
- Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topright,而不是-moz-border-top-right-radius。
示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 10px 0 0 0;
padding: 10px;
background: #bbb;
}
.test .one {
border-top-right-radius: 30px;
}
.test .two {
border-top-right-radius: 10px 30px;
}
</style>
</head>
<body>
<ul class="test">
<li class="one">水平与垂直半径相同时<br>border-top-right-radius:30px;</li>
<li class="two">水平与垂直半径不同时<br>border-top-right-radius:10px 30px;</li>
</ul>
</body>
</html>