CSS - border-end-start-radius 属性_CSS 菜鸟教程

CSS border-end-start-radius 属性定义元素的块端和内联开始侧之间的角半径。

此属性是一个逻辑边框半径，这意味着其值取决于元素的书写模式、方向和文本方向。

可能的值

<length>：使用长度值表示圆半径的大小。负值无效。

<percentage>：使用百分比值表示圆半径的大小。

水平轴百分比是指盒子的宽度。
垂直轴百分比是指盒子的高度。
负值无效。

适用于

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

DOM 语法

object.style.borderEndStartRadius = "length";

CSS 边框结束起始半径 - 长度值

下面是一个示例，说明如何使用长度值创建块结束和内联开始圆角 -

<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 margin: 10px;
	 	 	 border-end-start-radius: 60px 60px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 block-end and inline-start rounded corner.
	 	</div>
</body>
</html>

CSS 边框结束起始半径 - 百分比值

下面是一个示例，说明如何使用百分比值创建块结束和内联开始圆角 -

<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 margin: 10px;
	 	 	 border-end-start-radius: 30% 30%;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 block-end and inline-start rounded corner.
	 	</div>
</body>
</html>

带有动画的 CSS 边框结束开始半径

下面是一个示例，说明如何使用动画创建块结束和内联开始圆角 -

<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-end-start-radius: 100px; }
	 	}
</style>
</head>
<body>
	 	<div class="rounded-border">
	 	 	 block-end and inline-start rounded corner with animation.
	 	</div>
</body>
</html>

CSS 边框结束起始半径 - 方向 RTL

以下示例演示如何使用 border-end-start-radius 和 direction： rtl 属性在从右到左的方向上创建元素的圆角块端和内联开始角 -

<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 margin: 10px;
	 	 	 border-end-start-radius: 120px 60px;
	 	 	 direction: rtl
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 block-end and inline-start rounded corner using direction: rtl
	 	</div>
</body>
</html>

CSS 边框结束起始半径 - 写入模式

我们可以将 border-end-start-radius 属性与 writing-mode： vertical-lr 一起使用，它从上到下、从左到右垂直排列文本。同样，使用 writing-mode： vertical-rl，它从上到下和从右到左垂直排列文本。

这是一个例子 -

<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 margin: 10px;
	 	}
	 	.top-left-lr {
	 	 	 border-end-start-radius: 30%;
	 	 	 writing-mode: vertical-lr;
	 	}
	 	.top-left-rl {
	 	 	 border-end-start-radius: 30%;
	 	 	 writing-mode: vertical-rl;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box top-left-lr">
	 	 	 block-end and inline-start rounded corner using vertical-lr.
	 	</div>
	 	<div class="rounded-box top-left-rl">
	 	block-end and inline-start rounded corner using vertical-rl.
	 	</div>
</body>
</html>

CSS 边框结束开始半径 - 垂直文本

以下示例演示如何使用 border-end-start-radius 属性创建带有垂直文本的圆角块端和内联开始角 -

<html>
<head>
<style>
	 	.rounded-box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background-color: pink;
	 	 	 border: 3px solid green;
	 	 	 border-end-start-radius: 40%;
	 	}
	 	.text-box {
	 	 	 writing-mode: vertical-rl;
	 	 	 background-color: yellow;
	 	 	 border: 3px solid blue;
	 	 	 border-end-start-radius: 20%;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box">
	 	 	 <p class="text-box">block-end and inline-start rounded corner.</p>
	 	</div>
</body>
</html>

CSS border-end-start-radius - 相关属性

以下是与 border-end-start-radius 相关的 CSS 属性列表：

属性	值
writing-mode	设置元素的垂直和水平写入方向。
direction	设置文本的方向
text-orientation	设置行中字符的方向。

<< CSS - border-end-end-radius 属性 CSS - border-image 属性 >>