定义和用法
border-end-end-radius
属性用于定义元素的块方向末尾block-end
和行内方向末尾inline-end
之间的圆角半径。
border-end-end-radius
具体效果与书写方向(writing-mode)、文本朝向(text-orientation)和文字方向(direction)属性密切相关。它们共同决定了元素的块方向和行内方向,进而影响border-end-end-radius
所作用的具体边角。
默认值: | 0 |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.borderEndEndRadius="50px"Demo ❯ |
常用的实例
下面通过不同的演示实例,让你更直观地了解border-end-end-radius
属性的用法。
1. 为元素的块方向末尾和行内方向末尾添加圆角:
.example1 {
background-color: lightblue;
border-end-end-radius: 50px;
}
.example2 {
background-color: lightblue;
border-end-end-radius: 50px 20px;
}
.example3 {
background-color: lightblue;
border-end-end-radius: 50%;
direction: rtl;
}
.example4 {
background-color: lightblue;
border-end-end-radius: 50%;
writing-mode: vertical-rl;
}
2. 块方向和行内方向末尾的圆角位置受direction
属性的影响:
.example {
border: 2px solid black;
direction: rtl;
border-end-end-radius: 25px;
}
3. 块方向和行内方向末尾的圆角位置受writing-mode
属性的影响:
.example {
border: 2px solid black;
writing-mode: vertical-rl;
border-end-end-radius: 25px;
}
CSS 语法
border-end-end-radius: 0|length|initial|inherit;
属性值
值 | 描述 |
0 |
默认值。 |
length |
定义块级元素末尾和行内元素末尾处的圆角形状。参阅 CSS 单位。 |
% |
以元素在对应轴上的长度的百分比定义此圆角形状。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-end-end-radius
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
89.0 | 89.0 | 66.0 | 15.0 | 75.0 |
相关页面
CSS 教程:CSS 边框
CSS 参考手册:CSS border 属性
CSS 参考手册:CSS border-start-start-radius 属性
CSS 参考手册:CSS border-start-end-radius 属性
CSS 参考手册:CSS border-end-start-radius 属性
CSS 参考手册:CSS direction 属性
CSS 参考手册:CSS text-orientation 属性
CSS 参考手册:CSS writing-mode 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
16
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈