定义和用法
border-inline
属性设置元素在行内方向上的边框宽度、边框样式、边框颜色。
border-inline
是逻辑属性(logical property),它的具体表现取决于文档的书写模式(writing mode)。
默认值: | medium none color |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.borderInline="dashed hotpink 10px"Demo ❯ |
演示实例
下面通过演示实例,让你更直观地了解border-inline
属性的用法。
1. 为行内方向上的不同元素设置边框的样式、颜色和宽度:
h1 {
border-inline: 5px solid red;
}
h2 {
border-inline: 4px dotted blue;
}
div {
border-inline: double;
}
2. 行内方向上起始和结束位置的边框受writing-mode
属性的影响:
div {
writing-mode: vertical-rl;
border-inline: hotpink dashed 8px;
}
CSS 语法
border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;
属性值
值 | 描述 |
border-inline-width | 指定行内方向上边框的宽度(默认值为 "medium")。 |
border-inline-style | 指定行内方向上边框的样式(默认值为 "none")。 |
border-inline-color | 指定行内方向上边框的颜色(默认值为文本的颜色)。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-inline
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
相关页面
CSS 教程:CSS 边框
CSS 参考手册:CSS border 属性
CSS 参考手册:CSS border-inline-color 属性
CSS 参考手册:CSS border-inline-style 属性
CSS 参考手册:CSS border-inline-width 属性
CSS 参考手册:CSS direction 属性
CSS 参考手册:CSS text-orientation 属性
CSS 参考手册:CSS writing-mode 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
18
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈