CSS3 border-bottom-left-radius
属性
说明
border-bottom-left-radius
CSS 属性设置元素边框框的"左下角"圆角。
下表总结了此属性的使用上下文和版本历史记录。
默认值: | 0 |
---|---|
适用于: | 所有元素 |
继承: | No |
动画: | Yes. 参见动画属性。 |
版本: | New in CSS3 |
注意: border-bottom-left-radius
属性会使元素的背景变圆,即使没有定义边框或其值设置为 none
。
语法
属性的语法如下:
这种速记符号可以采用一个或两个空格分隔的值。
- 可选的第二个长度值定义左下角的垂直半径,因此角的形状是四分之一椭圆。
- 如果第二个长度被省略,或者等于第一个 — 角的形状是四分之一圆。 如果任一长度为零,则角是方形的,而不是圆形的。
下面的示例显示了 border-bottom-left-radius
属性的作用。
div {
border: 2px solid #f08080;
border-bottom-left-radius: 20px;
}
属性值
下表描述了该属性的值。
值 | 说明 |
---|---|
length | px , pt , cm , em 中的长度值等。不允许为负值。 |
percentage | 半径的大小百分比。 如果有两个值,第一个值(即水平半径)的百分比是相对于元素框的宽度计算的,而第二个值(即垂直半径)的百分比是相对于元素框的高度计算的 . 不允许使用负值。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定,则关联元素采用其父元素 border-bottom-left-radius 属性的 计算值 . |
浏览器兼容性
所有主要的现代浏览器都支持 border-bottom-left-radius
属性。
基本支持—
|
进一步阅读
相关属性: border-radius
, border-bottom-right-radius
, border-top-left-radius
, border-top-right-radius
.
Advertisements