border-start-start-radius
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
CSS 属性 border-start-start-radius
定义了元素的逻辑边框半径,并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。
尝试一下
此属性影响元素块首与行首之间的拐角。例如在 horizontal-tb
书写模式和 ltr
行内方向下,此属性对应于 border-top-left-radius
属性。
语法
css
/* 长度值 */
/* 使用一个值所得拐角为圆形 */
border-start-start-radius: 10px;
border-start-start-radius: 1em;
/* 使用两个值所得拐角为椭圆形 */
border-start-start-radius: 1em 2em;
/* 全局值 */
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 |
---|---|
适用元素 | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter . |
是否是继承属性 | 否 |
Percentages | refer to the corresponding dimension of the border box |
计算值 | two absolute <length> s or <percentage> s |
动画类型 | a length, percentage or calc(); |
形式语法
border-start-start-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
示例
竖排文本的边框半径
HTML
html
<div>
<p class="exampleText">示例</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;
}
结果
规范
Specification |
---|
CSS Logical Properties and Values Level 1 # border-radius-properties |
浏览器兼容性
BCD tables only load in the browser