border-start-start-radius
border-start-start-radius CSS 属性定义了元素上的逻辑边框半径，它映射到物理边框半径，具体取决于元素的 writing-mode、direction 和 text-orientation。这对于构建样式以使其在文本方向和书写模式下都能正常工作非常有用。
试一试
border-start-start-radius: 80px 80px;
border-start-start-radius: 250px 100px;
direction: rtl;
border-start-start-radius: 50%;
writing-mode: vertical-lr;
border-start-start-radius: 50%;
writing-mode: vertical-rl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a top left rounded corner.
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
此属性影响元素块起始侧和内联起始侧之间的角。例如，在 horizontal-tb 书写模式和 ltr 方向下，它对应于 border-top-left-radius 属性。
语法
css
/* <length> values */
/* With one value the corner will be a circle */
border-start-start-radius: 10px;
border-start-start-radius: 1em;
/* With two values the corner will be an ellipse */
border-start-start-radius: 1em 2em;
/* Global values */
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: revert;
border-start-start-radius: revert-layer;
border-start-start-radius: unset;
值
<length-percentage>-
表示圆的半径或椭圆的半长轴和半短轴的大小。作为绝对长度，它可以表示为 CSS
<length>数据类型允许的任何单位。百分比值中，水平轴的百分比值参照框的宽度，垂直轴的百分比值参照框的高度。负值无效。
正式定义
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素；但当border-collapse为collapse时，用户代理不要求应用于table和inline-table元素。目前，内部表格元素的行为未定义。它也适用于::first-letter。 |
| 继承性 | 否 |
| 百分比 | 参考边框框的相应维度 |
| 计算值 | 两个绝对 <length> 或 <percentage> 值 |
| 动画类型 | 一个长度、百分比或 calc()； |
正式语法
border-start-start-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
示例
带有垂直文本的边框半径
HTML
html
<div>
<p class="exampleText">Example</p>
</div>
CSS
css
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-start-start-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: white;
border-start-start-radius: 10px;
}
结果
规范
| 规范 |
|---|
| CSS 逻辑属性和值第 1 级 # border-radius-properties |
浏览器兼容性
加载中…