CSS border-start-end-radius 属性定义元素的 block-start 和 inline-end 两侧之间的角半径。
此属性是一个逻辑边框半径，这意味着其值取决于元素的书写模式、方向和文本方向。
可能的值
- <length>：使用长度值表示圆半径的大小。负值无效。
- <percentage>：使用百分比值表示圆半径的大小。
- 水平轴百分比是指盒子的宽度。
- 垂直轴百分比是指盒子的高度。
- 负值无效。
适用于
所有 HTML 元素，但 border-collapse 设置为 collapse 的 table 和 inline-table 元素除外。它也适用于 ：：first-letter。
DOM 语法
object.style.borderStartEndRadius = "length";
CSS border-start-end-radius - <长度>值
下面是一个示例，说明如何使用长度值创建块开始和内联结束圆角 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
margin: 10px;
border-start-end-radius: 60px 60px;
}
</style>
</head>
<body>
<div class="rounded-box">
block-start and inline-end rounded corner.
</div>
</body>
</html>
CSS border-start-end-radius - <百分比>值
下面是一个示例，说明如何使用百分比值创建块开始和内联结束圆角 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
margin: 10px;
border-start-end-radius: 30% 30%;
}
</style>
</head>
<body>
<div class="rounded-box">
block-start and inline-end rounded corner.
</div>
</body>
</html>
CSS border-start-end-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-start-end-radius: 100px; }
}
</style>
</head>
<body>
<div class="rounded-border">
block-start and inline-end rounded corner with animation.
</div>
</body>
</html>
CSS border-start-end-radius - 方向 RTL
以下示例演示如何使用 border-start-end-radius 和 direction： rtl 属性在从右到左的方向上创建元素的圆角块开始角和内联结束角 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
margin: 10px;
border-start-end-radius: 120px 50px;
direction: rtl
}
</style>
</head>
<body>
<div class="rounded-box">
block-start and inline-end rounded corner using direction: rtl.
</div>
</body>
</html>
CSS border-start-end-radius - 写入模式
我们可以将 border-start-end-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-start-end-radius: 30%;
writing-mode: vertical-lr;
}
.top-left-rl {
border-start-end-radius: 30%;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="rounded-box top-left-lr">
block-start and inline-end rounded corner using vertical-lr.
</div>
<div class="rounded-box top-left-rl">
block-start and inline-end rounded corner using vertical-rl.
</div>
</body>
</html>
CSS border-start-end-radius - 垂直文本
以下示例演示如何使用 border-start-end-radius 属性创建带有垂直文本的圆角块开始角和内联端角 -
<html>
<head>
<style>
.rounded-box {
width: 150px;
height: 150px;
background-color: pink;
border: 3px solid green;
border-start-end-radius: 40%;
}
.text-box {
writing-mode: vertical-rl;
background-color: yellow;
border: 3px solid blue;
border-start-end-radius: 20%;
padding: 5px;
}
</style>
</head>
<body>
<div class="rounded-box">
<p class="text-box">block-start and inline-end rounded corner.</p>
</div>
</body>
</html>
CSS border-start-end-radius - 相关属性
以下是与 border-start-end-radius 相关的 CSS 属性列表：
| 属性 | 值 |
|---|---|
| writing-mode | 设置元素的垂直和水平写入方向。 |
| direction | 设置文本的方向 |
| text-orientation | 设置行中字符的方向。 |
