border-inline

Avatar of Joel Olawanle
Joel Olawanle

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!

border-inline 是一个 CSS 逻辑 简写属性,它将 border-inline-colorborder-inline-styleborder-inline-width 合并到一个声明中,以样式化元素在内联(左和右)方向上的边框。

.element {
  border-inline: 5px solid red;
  writing-mode: horizontal-tb;
}

border-inline 是物理属性的逻辑等效项,包括 border-leftborder-right(或 border-topborder-bottom,取决于 writing-mode)。它在 CSS 逻辑属性和值级别 1 规范 中定义,该规范在撰写本文时处于编辑草案阶段。该属性也是 border-block 的伴侣,它用于设置在块(上和下)方向上流动的边框的样式。

Two light gray boxes, side-by-side-. One has a solid orange border on the left and right. The one of the right has the same borders, but on the top and bottom. The left box is in a horizontal writing mode and the right box is in a vertical writing mode.
border-inline 默认情况下会设置元素内联方向(左和右)上的边框的样式,但在切换 writing-mode 时,它会适应块方向(上和下)上的边框。

如果未明确声明,writing-mode 默认情况下为水平自上而下。

书写模式设置方向

边框的方向取决于 writing-mode 属性。当书写模式设置为默认水平方向时,border-inline 将应用于元素的左和右边框。相反,垂直 writing-modeborder-inline 应用于上和下边框。

语法

border-inline 逻辑属性是一个简写,用于在单个声明中设置开始和结束 border-inline-widthborder-inline-styleborder-inline-color。“开始”和“结束”的方向取决于元素的书写模式。

border-inline: <border-inline-width> || <border-inline-style> || <border-inline-color>

浏览器支持

IEEdgeFirefoxChromeSafariOpera
92 166+87+14.1+73+
iOS
Safari
Android ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
14.7+92+90+92+64 1
来源:caniuse

1 可以通过将 #enable-experimental-web-platform-features 设置为启用来启用。

组成属性

让我们具体看一下 border-inline-widthborder-inline-styleborder-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:水平书写模式下右侧边框的宽度,垂直从左到右书写模式下的底部边框的宽度,以及垂直从右到左书写模式下的顶部边框的宽度。
IEEdgeFirefoxChromeSafariOpera
92 166+87+14.1+73+
iOS
Safari
Android ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
14.7+92+90+92+64 1
来源:caniuse

1 可以通过将 #enable-experimental-web-platform-features 设置为启用来启用。

border-inline-style

border-inline-styleborder-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:在水平书写模式下右边的样式,在垂直从左到右书写模式下底部的样式,以及在垂直从右到左书写模式下顶部的样式。
IEEdgeFirefoxChromeSafariOpera
92 166+87+14.1+73+
iOS
Safari
Android ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
14.7+92+90+92+64 1
来源:caniuse

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:在水平书写模式下右边的颜色,在垂直从左到右书写模式下右边的颜色,以及在垂直从右到左书写模式下左边的颜色。
IEEdgeFirefoxChromeSafariOpera
79+41+69+12.1+56+
iOS
Safari
Android ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
12.2+92+90+92+64
来源:caniuse

让我们谈谈只声明一侧

但是等等!你可能会想到如何只为容器的一侧声明边框,而不是让它在左右或上下都有。如果我们使用的是物理 CSS 属性,那么我们可以直接使用 border-leftborder-rightborder-topborder-bottom 属性。

但是对于逻辑属性,我们使用 border-inline-startborder-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-inlineborder-inline-startborder-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设置“结束”边框的颜色

更多信息

进一步阅读