百科狗border-bottom-left-radius - 左下角圆角边框 - css 圆角
border-bottom-left-radius
版本：CSS3
border-bottom-left-radius属性设置元素的左下角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。
盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个CSS属性background-clip来定义。
在border-bottom-left-radius属性值之后，如果作用的元素上没有设置border-radius属性，那么这个属性值就会通过简写属性重新设置成它的初始值。
示例
/* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* the corner is an ellipsis */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit;
浏览器支持
IE9以上版本的浏览器都支持border-bottom-left-radius |
语法
border-bottom-left-radius:|- 若一个值：表示左下角边框的圆角半径。
- 若两个值：第一个值表示左下角的椭圆的水平半径。第二个值表示左下角的椭圆的垂直半径。
取值：
- 如设置
border-bottom-left-radius:5px 10px表示top-right这个角的水平圆角半径为5px，垂直圆角半径为10px。 - 对应的脚本特性为borderTopRightRadius。
| 默认值 | 0 |
| 适用于 | 所有元素 |
| 继承性 | 无 |
| 动画性 | 是 |
| 计算值 | 指定值 |
实例
div{
width:430px;
height:300px;
border:3pxsolidpink;
border-bottom-left-radius:50%;
text-align:center;
line-height:300px;
font-size:20px;
}
边框
效果图：
| Live example | Code |
|---|---|
An arc of circle is used as the border
div {
border-bottom-left-radius: 40px 40px;
}
| |
An arc of ellipse is used as the border
div {
border-bottom-left-radius: 40px 20px;
}
| |
The box is a square: an arc of circle is used as the border
div {
border-bottom-left-radius: 40%;
}
| |
The box is not a square: an arc of ellipse is used as the border
div {
border-bottom-left-radius: 40%;
}
| |
The background color is clipped at the border
div {
border-bottom-left-radius:40%;
border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box;
}
|
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
