导航分类

机器学习教程

CSS border-image-width 属性 CSS border-inline-color 属性

CSS border-inline 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

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 属性

CSS border-image-width 属性 CSS border-inline-color 属性

评论区 0

发表评论

教程介绍

CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。

87 章节

18 阅读

0 评论