border-start-end-radius
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.
CSS 属性 border-start-end-radius 定义了元素的逻辑边框半径，并根据元素的书写模式、行内方向和文本朝向对应至实体边框半径。此属性便于构建适应各种文本朝向和书写模式的样式。
尝试一下
border-start-end-radius: 80px 80px; border-start-end-radius: 250px 100px; direction: rtl; border-start-end-radius: 50%; writing-mode: vertical-lr; border-start-end-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 right 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-right-radius 属性。
语法
css
/* 长度值 */ /* 使用一个值所得拐角为圆形 */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* 使用两个值所得拐角为椭圆形 */ border-start-end-radius: 1em 2em; /* 全局值 */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: revert; border-start-end-radius: revert-layer; border-start-end-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-end-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-end-radius: 10px; } .exampleText { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } 结果
规范
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # border-radius-properties |
浏览器兼容性
Loading…