码农教程 - 一技在手,衣食无忧! tools

目录

CSS border-start-end-radius 属性

❮上一节 完整的CSS参考 下一节❯

示例

将圆角添加到某些元素的块开始和行内结束侧：

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}

#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}

#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}

#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个border-start-end-radius属性定义元素的块开始侧和行内结束侧之间的角半径。

笔记：相关CSS属性writing-mode,text-orientation和direction定义块和内联方向。这就是为什么这些属性也会影响结果border-start-end-radius属性。对于英文页面，内联方向是从左到右，块方向是向下。

如果border-start-end-radius属性有两个值，角将是一个椭圆：

  • 边框开始结束半径：50px 100px；

如果border-start-end-radius属性有一个值，角将是一个圆：

  • 边界开始结束半径：50px；

CSSborder-start-end-radius属性与 CSS 属性非常相似border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius和border-top-right-radius，但是border-start-end-radius属性取决于块和内联方向。

展示演示❯

默认值： 0
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS3
JavaScript 语法： 对象.style.borderStartEndRadius="50px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
border-start-end-radius 89.0 89.0 66.0 15.0 75.0

CSS 语法

border-start-end-radius: 0| length|initial|inherit;

属性值

Value Description Demo
0 Default value. Demo ❯
length Defines the shape of the corner at block-start and inline-end. Read about length units Demo ❯
% Defines the shape of the corner at block-start and inline-end in percentange of length of element on corresponding axis. Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

具有方向属性

圆角在块方向开始处和内联方向结束处的位置受direction属性：

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}
亲自试一试 »

具有写入模式属性

圆角在块方向开始处和内联方向结束处的位置受writing-mode属性：

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}
亲自试一试 »

相关页面

CSS教程：CSS 圆角

CSS border-bottom-left-radius 属性：CSS Border-bottom-left-radius 属性

CSS border-bottom-right-radius 属性：CSS Border-bottom-right-radius 属性

CSS border-top-left-radius 属性：CSS Border-top-left-radius 属性

CSS border-top-right-radius 属性：CSS Border-top-right-radius 属性

CSS方向属性：CSS 方向属性

CSS 文本方向属性：CSS 文本方向属性

CSS 写入模式属性：CSS 书写模式属性


❮上一节 完整的CSS参考 下一节❯