CSS border-block-start-width 属性
定义和用法
border-block-start-width 属性设置元素在块方向起始处的边框宽度。
注意:要使 border-block-start-width 属性生效,必须设置 border-block-start-style 属性。
CSS border-block-start-width 属性与 CSS 属性 border-bottom-width、border-left-width、border-right-width 和 border-top-width 非常相似,但 border-block-start-width 属性依赖于块方向。
注意:相关的 CSS 属性 writing-mode 定义了块方向。这会影响块的起始和结束位置,以及 border-block-start-width 属性的结果。对于英文页面,行内方向是从左到右,块方向是向下。
实例
例子 1
设置块方向起始处的边框宽度:
div {
border-block-start-style: solid;
border-block-start-width: 10px;
}
例子 2:结合 writing-mode 属性
块方向起始处边框宽度的位置受 writing-mode 属性的影响:
div {
border-block-start-style: solid;
writing-mode: vertical-rl;
border-block-start-width: 5px;
}
CSS 语法
border-block-start-width: medium|thin|thick|length|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| medium | 指定中等宽度的边框。默认值。 |
| thin | 指定细边框。 |
| thick | 指定粗边框。 |
| length | 允许您定义边框的厚度。另请参阅:CSS 单位。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值: | medium |
|---|---|
| 继承性: | 否 |
| 动画制作: | 支持。请参阅:动画相关属性。 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.borderBlockStartWidth="10px" |
浏览器支持
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
相关页面
教程:CSS 边框