border-start-start-radius

**border-start-start-radius** CSS 属性定义了元素的逻辑边框半径,它映射到一个物理边框半径,该半径取决于元素的 writing-modedirectiontext-orientation。这在构建无论 文本方向书写模式 如何都能正常工作的样式时很有用。

试试看

此属性影响元素的块开始侧和内联开始侧之间的角。例如,在 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-collapsecollapse 时将其应用于 tableinline-table 元素。目前,内部表格元素的行为是未定义的。它也适用于 ::first-letter
继承
百分比指的是边框盒的相应尺寸
计算值两个绝对 <length><percentage>
动画类型一个 <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: #fff;
  border-start-start-radius: 10px;
}

结果

规范

规范
CSS 逻辑属性和值级别 1
# 边框半径属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载

参见