CSS - border-start-start-radius 属性



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 设置行中字符的方向。