DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!
border-inline
是一个 CSS 逻辑 简写属性,它将 border-inline-color
、border-inline-style
和 border-inline-width
合并到一个声明中,以样式化元素在内联(左和右)方向上的边框。
.element {
border-inline: 5px solid red;
writing-mode: horizontal-tb;
}
border-inline
是物理属性的逻辑等效项,包括 border-left
和 border-right
(或 border-top
和 border-bottom
,取决于 writing-mode
)。它在 CSS 逻辑属性和值级别 1 规范 中定义,该规范在撰写本文时处于编辑草案阶段。该属性也是 border-block
的伴侣,它用于设置在块(上和下)方向上流动的边框的样式。

border-inline
默认情况下会设置元素内联方向(左和右)上的边框的样式,但在切换 writing-mode
时,它会适应块方向(上和下)上的边框。如果未明确声明,writing-mode
默认情况下为水平自上而下。
书写模式设置方向
边框的方向取决于 writing-mode
属性。当书写模式设置为默认水平方向时,border-inline
将应用于元素的左和右边框。相反,垂直 writing-mode
将 border-inline
应用于上和下边框。
语法
border-inline
逻辑属性是一个简写,用于在单个声明中设置开始和结束 border-inline-width
、border-inline-style
和 border-inline-color
。“开始”和“结束”的方向取决于元素的书写模式。
border-inline: <border-inline-width> || <border-inline-style> || <border-inline-color>
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 92 1 | 66+ | 87+ | 14.1+ | 73+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
14.7+ | 92+ | 90+ | 92+ | 64 1 |
1 可以通过将
#enable-experimental-web-platform-features
设置为启用来启用。组成属性
让我们具体看一下 border-inline-width
、border-inline-style
和 border-inline-color
— 构成 border-inline
简写属性的三个属性。
border-inline-width
border-inline-width
基本上与您期望从 border-width
属性获得的结果相同:它定义了元素逻辑内联边框的厚度。最大的区别是 border-inline-width
会适应元素的书写模式。
/* <'border-inline-width'> values */
border-inline-width: 15px;
border-inline-width: thin; /* equivalent to 1px */
border-inline-width: medium; /* equivalent to 3px */
border-inline-width: thick; /* equivalent to 5px */
/* Global values */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: unset;
- 初始值:中等
- 应用于:与
border-left-width
相同 - 继承:否
- 百分比:n/a
- 计算值:与对应的
border-*-width
属性相同 - 规范顺序:根据语法
- 动画类型:离散
border-inline-width
也被认为是一个简写属性,即使它是 border-inline
的组成部分。它包含以下属性来控制元素在开始和结束方向上的每个单独边框的宽度
border-inline-start-width
:水平书写模式下左侧边框的宽度,垂直从左到右书写模式下的顶部边框的宽度,以及垂直从右到左书写模式下的底部边框的宽度。border-inline-end-width
:水平书写模式下右侧边框的宽度,垂直从左到右书写模式下的底部边框的宽度,以及垂直从右到左书写模式下的顶部边框的宽度。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 92 1 | 66+ | 87+ | 14.1+ | 73+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
14.7+ | 92+ | 90+ | 92+ | 64 1 |
1 可以通过将
#enable-experimental-web-platform-features
设置为启用来启用。border-inline-style
border-inline-style
是 border-style
的逻辑等效项,使用方法完全相同,用于指定在元素周围绘制的线条类型。事实上,它也接受与 border-style
完全相同的取值。
/* <'border-block-style'> values */
border-inline-style: hidden;
border-inline-style: solid
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: double;
border-inline-style: groove;
border-inline-style: ridge;
border-inline-style: inset;
border-inline-style: outset;
/* Global values */
border-inline-style: inherit;
border-inline-style: initial;
border-inline-style: revert;
border-inline-style: unset;
- 初始值:无
- 应用于:与
border-left-style
相同 - 继承:否
- 百分比:n/a
- 计算值:与对应的
border-*-style
属性相同 - 规范顺序:根据语法
- 动画类型:离散
border-inline-style
也被认为是一个简写属性。它包含以下属性,用于控制元素开始和结束方向上的各个边框的线条类型。
border-inline-start-style
:在水平书写模式下左边的样式,在垂直从左到右书写模式下顶部的样式,以及在垂直从右到左书写模式下右边的样式。border-inline-end-style
:在水平书写模式下右边的样式,在垂直从左到右书写模式下底部的样式,以及在垂直从右到左书写模式下顶部的样式。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 92 1 | 66+ | 87+ | 14.1+ | 73+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
14.7+ | 92+ | 90+ | 92+ | 64 1 |
1 可以通过将
#enable-experimental-web-platform-features
设置为启用来启用。border-inline-color
border-inline-color
用于指定边框颜色。
border-inline-color: yellow;
border-inline-color: #F5F6F7;
border-inline-color: rgba(170, 50, 220, .6);
border-inline-color: hsla(50, 100%, 50%, .6);
/* Global values */
border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: unset;
- 初始值:无
- 应用于:与
border-left-color
相同 - 继承:否
- 百分比:n/a
- 计算值:与相应的
border-*-color
属性相同 - 规范顺序:根据语法
- 动画类型:按计算值类型
border-inline-color
也被认为是一个简写属性。它包含以下属性,用于控制元素开始和结束方向上的各个边框的线条类型。
border-inline-start-color
:在水平书写模式下左边的颜色,在垂直从左到右书写模式下顶部的颜色,以及在垂直从右到左书写模式下底部的颜色。border-inline-end-color
:在水平书写模式下右边的颜色,在垂直从左到右书写模式下右边的颜色,以及在垂直从右到左书写模式下左边的颜色。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 41+ | 69+ | 12.1+ | 56+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
12.2+ | 92+ | 90+ | 92+ | 64 |
让我们谈谈只声明一侧
但是等等!你可能会想到如何只为容器的一侧声明边框,而不是让它在左右或上下都有。如果我们使用的是物理 CSS 属性,那么我们可以直接使用 border-left
、border-right
、border-top
和 border-bottom
属性。
但是对于逻辑属性,我们使用 border-inline-start
和 border-inline-end
来设置单个边框。让我们具体看看这两个属性,并了解它们是如何工作的。
border-inline-start
border-inline-start
设置元素的逻辑“开始”边框。因此,如果我们在默认的水平从上到下书写模式下工作,那么左边的边框就是开始,右边的边框就是结束。
.box {
border-inline-start: 5px solid red;
writing-mode: horizontal-tb;
height: 200px;
width: 200px;
}
但是!如果我们将书写方向改为垂直从左到右,那么起始边缘将旋转 90 度,这使得顶部的边框成为开始。
而且,如果我们将方向改为垂直从右到左,你可能已经猜到了:底部的边框将成为开始。
书写模式 | 起始边框 |
---|---|
horizontal-tb | 左边的边框 |
vertical-lr | 顶部的边框 |
vertical-rl | 顶部的边框 |
border-inline-end
border-inline-end
与我们刚刚在 border-inline-start
中看到的一切都一样,只是方向相反。因此,如果在水平从上到下书写模式中的“开始”是左边的边框,那么“结束”就是右边的边框。
.box {
border-inline-end: 5px solid red;
writing-mode: horizontal-tb;
height: 200px;
width: 200px;
}
书写模式 | 结束边框 |
---|---|
horizontal-tb | 右边的边框 |
vertical-lr | 底部的边框 |
vertical-rl | 底部的边框 |
组成部分到组成部分!
我们刚刚看到 border-inline
是 border-inline-start
和 border-inline-end
的简写。我们也知道 border-inline
接受另外三个属性作为其值。
border-inline-width
border-inline-style
border-inline-color
好吧,如果你能相信,这些属性也是它们自身单个属性的简写。我们实际上可以使用它们通过在属性名称中插入“start”和“end”来设置元素的各个边框的宽度、样式和颜色。
开始边框属性 | 它的作用 |
---|---|
border-inline-start-width | 设置“开始”边框的宽度 |
border-inline-start-style | 设置“开始”边框的线条样式 |
border-inline-start-color | 设置“开始”边框的颜色 |
结束边框属性 | 它的作用 |
---|---|
border-inline-end-width | 设置“结束”边框的宽度 |
border-inline-end-style | 设置“结束”边框的线条样式 |
border-inline-end-color | 设置“结束”边框的颜色 |