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

CSS border-start-start-radius 属性定义了元素的 block-start 和 inline-start 两侧之间的角半径。

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

可能的值

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

适用于

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

DOM 语法

object.style.borderStartStartRadius = "length";

CSS border-start-start-radius - <length>值

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

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

CSS border-start-start-radius - <percentage>值

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

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

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

CSS border-start-start-radius - 方向 RTL

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

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

CSS border-start-start-radius - 写作模式

我们可以使用 border-start-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-start-start-radius: 30%;
	 	 	 writing-mode: vertical-lr;
	 	}
	 	.top-left-rl {
	 	 	 border-start-start-radius: 30%;
	 	 	 writing-mode: vertical-rl;
	 	}
</style>
</head>
<body>
	 	<div class="rounded-box top-left-lr">
	 	 	 block-start and inline-start rounded corner using vertical-lr.
	 	</div>
	 	<div class="rounded-box top-left-rl">
	 	 	 block-start and inline-start rounded corner using vertical-rl.
	 	</div>
</body>
</html>

CSS border-start-start-radius - 垂直文本

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

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

CSS border-start-start-radiuss - 相关属性

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

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

<< CSS - border-start-end-radius 属性 CSS - border-style 属性 >>