CSS border-inline-width 属性
示例
设置内联方向边框的宽度
#example1 {
border-inline-style: solid;
border-inline-width: 10px;
}
#example2 {
border-inline-style: dashed;
border-inline-width: thin thick;
}
尝试一下 »
下面还有更多“尝试一下”的示例。
定义和用法
The border-inline-width 属性设置元素在内联方向上的边框宽度。
注意：为了使 border-inline-style 属性生效，必须设置 border-inline-style 属性。
可以以不同的方式设置 border-inline-width 属性的值
如果 border-inline-width 属性有两个值
- border-inline-width: 10px 50px;
- 内联开始处的边框宽度为 10px
- 内联结束处的边框宽度为 50px
如果 border-inline-width 属性有一个值
- border-inline-width: 10px;
- 内联开始和结束处的边框宽度为 10px
CSS border-inline-width 属性与 CSS 属性 border-bottom-width、border-left-width、border-right-width 和 border-top-width 非常相似，但 border-inline-width 属性取决于内联方向。
注意：相关的 CSS 属性 writing-mode、text-orientation 和 direction 定义内联方向。这会影响行的开始和结束位置以及 border-inline-width 属性的结果。对于英语页面，内联方向是从左到右，块方向是向下。
| 默认值 | medium |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 阅读有关可动画 尝试一下 |
| 版本 | CSS3 |
| JavaScript 语法 | 对象.style.borderInlineWidth="3px 10px" 尝试一下 |
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-inline-width | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
CSS 语法
border-inline-width: medium|thin|thick|length|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| medium | 指定中等边框。这是默认值 | 演示 ❯ |
| thin | 指定细边框 | 演示 ❯ |
| thick | 指定粗边框 | 演示 ❯ |
| length | 允许您定义边框的厚度。 阅读有关长度单位 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 阅读有关initial | |
| inherit | 从其父元素继承此属性。 阅读有关inherit |
更多示例
使用 writing-mode 属性
内联方向开始和结束处的边框位置受 writing-mode 属性影响
div {
border-inline-style: solid;
writing-mode: vertical-rl;
border-inline-width: 5px;
}
尝试一下 »
使用 direction 属性
内联方向开始和结束处的边框位置受 direction 属性影响
div {
direction: rtl;
border-inline-width: 5px 15px;
}
尝试一下 »
相关页面
CSS 教程：CSS 边框
CSS 边框属性：CSS 边框属性
CSS 边框内联属性：CSS 边框内联属性
CSS 边框内联样式属性：CSS 边框内联样式属性
CSS 边框底部宽度属性：CSS 边框底部宽度属性
CSS 边框左侧宽度属性：CSS 边框左侧宽度属性
CSS 边框右侧宽度属性：CSS 边框右侧宽度属性
CSS 边框顶部宽度属性：CSS 边框顶部宽度属性
CSS 方向属性：CSS 方向属性
CSS 文本方向属性：CSS 文本方向属性
CSS 书写模式属性：CSS 书写模式属性
