CSS参考手册
»
属性列表
»
边框属性
»
相关内容:
其它边框属性参考
选择其它项
border
border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
border-image
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
box-shadow
box-reflect
border-bottom-left-radius
版本:CSS3
继承性:无
语法:
border-bottom-left-radius
:[
<length>
|
<percentage>
] [
<length>
|
<percentage>
]?
默认值
:
0
取值:
<length>
:
用长度值设置对象的左下角(bottom-left)圆角半径长度。不允许负值
<percentage>
:
用百分比设置对象的左下角(bottom-left)圆角半径长度。不允许负值
说明:
设置或检索对象的左下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
如设置border-bottom-left-radius:5px 10px;表示bottom-left这个角的水平圆角半径为5px,垂直圆角半径为10px。
对应的脚本特性为
borderBottomLeftRadius
。
兼容性:
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
橙色
= 实验性质
支持版本
\类型
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-bottom-left-radius_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨)" /> <style> ul{margin:0;padding:0;} li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;} .test .one{border-bottom-left-radius:30px;} .test .two{border-bottom-left-radius:10px 30px;} </style> </head> <body> <ul class="test"> <li class="one">水平与垂直半径相同时<br />border-bottom-left-radius:30px;</li> <li class="two">水平与垂直半径不同时<br />border-bottom-left-radius:10px 30px;</li> </ul> </body> </html>