目录

CSS border-start-start-radius 属性


示例

将圆角添加到某些元素的块开始和内联开始边:

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

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

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

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

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


定义和用法

这个border-start-start-radius属性定义元素的块开始边和内联开始边之间的角半径。

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

如果border-start-start-radius属性有两个值,角将是一个椭圆:

  • 边框起始半径:50px 100px;

如果border-start-start-radius属性有一个值,角将是一个圆:

  • 边界起始半径:50px;

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

展示演示❯

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

浏览器支持

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

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


CSS 语法

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

属性值

Value Description Demo
0 Default value. Demo ❯
length Defines the shape of the corner at block-start and inline-start. Read about length units Demo ❯
% Defines the shape of the corner at block-start and inline-start 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-start-radius: 25px;
}
亲自试一试 »

具有写入模式属性

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

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-start-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 书写模式属性