CSS - border-top-left-radius 属性

CSS border-top-left-radius 属性控制元素边框左上角的圆度。

可能的值

<length>：使用长度值表示圆半径的大小。负值无效。
<percentage>：使用百分比值表示圆半径的大小。
- 水平轴百分比是指框的宽度。
- 垂直轴百分比是指框的高度。
- 负值无效。

适用于

所有 HTML 元素，但 border-collapse 设置为 collapse 的 table 和 inline-table 元素除外。适用于 ::first-letter 。

DOM 语法

object.style.borderTopLeftRadius = "length";

如果在元素上设置 border-top-left-radius 属性，然后在同一元素上设置 border-radius 属性，则 border-top-left-radius 属性将重置为其初始值。

CSS border-top-left-radius - <length> 值

以下是如何使用 length 值创建左上角圆角的示例 -


<html>
<head>
<style>
	 	.rounded-border {
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 border-top-left-radius: 50px;
	 	 	 background-size: 100% 100%;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-border">
	 	 	 top-left rounded corner.
	 	</div>
</body>
</html>

CSS border-top-left-radius - <percentage> 值

以下是如何使用百分比值创建左上角圆角的示例 -


<html>
<head>
<style>
	 	.rounded-border {
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 border-top-left-radius: 25%;
	 	 	 background-size: 100% 100%;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-border">
	 	 	 top-left rounded corner.
	 	</div>
</body>
</html>

CSS border-top-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-top-left-radius: 100px; }
	 	}
</style>
</head>
<body>
	 	<div class="rounded-border">
	 	 	 top-left rounded corner with animation.
	 	</div>
</body>
</html>

CSS border-top-left-radius - 具有不同的形状

以下示例演示如何使用 border-top-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-top-left-radius: 35px;
	 	}
	 	.rounded-box.ellipse-arc {
	 	 	 border-top-left-radius: 75px 35px;
	 	}
	 	.rounded-box.square-per {
	 	 	 border-top-left-radius: 30%;
	 	}
	 	.non-square-per {
	 	 	 border-top-left-radius: 30%;
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 margin: 10px;
	 	}
</style>
</head>
<body>
	 	<h3>Different shapes using border-top-left-radius property</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-top-left-radius - 带图像

以下示例演示了如何使用 border-top-left-radius 属性创建左上角圆角图像 -


<html>
<head>
<style>
	 	.img-border-radius {
	 	 	 background-image: url(images/tree.jpg);
	 	 	 border-top-left-radius: 6em;
	 	 	 background-size: 100% 100%;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<div class="img-border-radius">
	 	 	 top-left rounded corner image.
	 	</div>
</body>
</html>

打印本页