border-end-start-radius
**border-end-start-radius
** CSS 属性定义元素上的逻辑边框半径,它映射到物理边框半径,具体取决于元素的 writing-mode
、direction
和 text-orientation
。这在构建无论 文本方向 和 书写模式 如何都能正常工作的样式时非常有用。
试一试
此属性影响元素的块级结束端和内联开始端之间的角。例如,在 horizontal-tb
书写模式和 ltr
方向下,它对应于 border-bottom-left-radius
属性。
语法
css
/* <length> values */
/* With one value the corner will be a circle */
border-end-start-radius: 10px;
border-end-start-radius: 1em;
/* With two values the corner will be an ellipse */
border-end-start-radius: 1em 2em;
/* Global values */
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;
值
<length-percentage>
-
表示圆形半径的大小或椭圆的长半轴和短半轴。作为绝对长度,它可以用 CSS
<length>
数据类型允许的任何单位表示。水平轴的百分比指的是盒子的宽度,垂直轴的百分比指的是盒子的高度。负值无效。
正式定义
初始值 | 0 |
---|---|
应用于 | 所有元素;但用户代理在 border-collapse 为 collapse 时,不需要将其应用于 table 和 inline-table 元素。目前,内部表格元素的行为未定义。它也应用于 ::first-letter 。 |
继承 | 否 |
百分比 | 指的是边框框对应的尺寸 |
计算值 | 两个绝对 <length> 或 <percentage> |
动画类型 | 一个 长度、百分比 或 calc(); |
正式语法
border-end-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-end-start-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: #fff;
border-end-start-radius: 10px;
}
结果
规范
规范 |
---|
CSS 逻辑属性和值级别 1 # border-radius-properties |
浏览器兼容性
BCD 表格仅在浏览器中加载