CSS border-bottom-left-radius 属性控制元素边框左下角的圆度。
可能的值
<length>：使用长度值表示圆半径的大小。负值无效。
<percentage>：使用百分比值表示圆半径的大小。
- 水平轴百分比是指盒子的宽度。
- 垂直轴百分比是指盒子的高度。
- 负值无效。
适用于
所有 HTML 元素。
DOM 语法
object.style.borderBottomLeftRadius = "length";
如果直接在元素上设置 border-bottom-left-radius 属性，然后将简写 border-radius 属性应用于未指定左下角值的元素，则 border-bottom-left-radius 属性将重置为其初始值。
CSS border-bottom-left-radius - 长度值
这是一个如何使用长度值创建左下角圆角的示例 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
border-bottom-left-radius: 50px;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="rounded-border">
bottom-left rounded corner.
</div>
</body>
</html>
CSS border-bottom-left-radius - 百分比值
以下是如何使用百分比值创建左下角圆角的示例 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
border-bottom-left-radius: 25%;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="rounded-border">
bottom-left rounded corner.
</div>
</body>
</html>
CSS border-bottom-left-radius - 动画
下面是一个示例，说明如何创建带有动画的左下角圆角 -
<html>
<head>
<style>
.rounded-border {
background-color: pink;
border: 3px solid green;
background-size: 100% 100%;
width: 200px;
height: 200px;
animation: animatedRadius 5s infinite;
}
@keyframes animatedRadius {
50% { border-bottom-left-radius: 100px; }
}
</style>
</head>
<body>
<div class="rounded-border">
bottom-left rounded corner.
</div>
</body>
</html>
CSS border-bottom-left-radius - 不同的形状
以下示例演示如何使用 border-bottom-left-radius 属性为元素的左下角创建不同的形状 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
margin: 10px;
}
.rounded-box.circle-arc {
border-bottom-left-radius: 35px;
}
.rounded-box.ellipse-arc {
border-bottom-left-radius: 75px 35px;
}
.rounded-box.square-per {
border-bottom-left-radius: 30%;
}
.non-square-per {
border-bottom-left-radius: 30%;
width: 200px;
height: 100px;
background-color: pink;
border: 3px solid green;
margin: 10px;
}
</style>
</head>
<body>
<h3>Different shapes using border-bottom-left-radius pproperty</h3>
<div class="rounded-box circle-arc">
Arc of an circle.
</div>
<div class="rounded-box ellipse-arc">
Arc of an ellipse.
</div>
<div class="rounded-box square-per">
Square element with % radius.
</div>
<div class="non-square-per">
Non-square element with % radius.
</div>
</body>
</html>
CSS border-bottom-left-radius - 图像
以下示例演示了如何使用 border-bottom-left-radius 属性创建左下角圆角图像 -
<html>
<head>
<style>
.img-border-radius {
background-image: url(images/tree.jpg);
border-bottom-left-radius: 6em;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="img-border-radius">
bottom-left rounded corner image.
</div>
</body>
</html>
