CSS - border-bottom-left-radius 属性

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>

打印本页