CSS 年鉴 → 属性 → B → border-block

border-block

Avatar of Joel Olawanle
Joel Olawanle 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

border-block 是一个 CSS 逻辑 简写属性，它将 border-block-color、border-block-style 和 border-block-width 组合到一个声明中。

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

border-block 等同于物理属性，包括 border-top 和 border-bottom（或 border-right 和 border-left，具体取决于 writing-mode）。它在 CSS 逻辑属性和值级别 1 规范 中定义，在撰写本文时，该规范处于编辑草案阶段。该属性也是 border-inline 的配套属性，后者用于设置沿内联方向的边框样式。

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

如果未显式声明，则 writing-mode 默认设置为水平自上而下。

书写模式设置方向

边框的方向取决于 writing-mode 属性。当书写模式设置为默认水平方向时，border-block 将应用于元素的顶部和底部边框。相反，垂直 writing-mode 会将 border-block 应用于右侧和左侧边框。

语法

border-block 逻辑属性是设置开始和结束 border-block-width、border-block-style 和 border-block-color 的简写形式，在一个声明中完成。再次强调，“开始”和“结束”的方向取决于元素的书写模式。

border-block: <border-block-width> || <border-block-style> || <border-block-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-block-width、border-block-style 和 border-block-color——构成 border-block 简写形式的三个属性。

border-block-width

border-block-width 基本上与您从 border-width 属性获得的结果相同：它定义了元素的逻辑块边框的厚度。最大的区别在于 border-block-width 会适应元素的书写模式。

/* <'border-block-width'> values */
border-block-width: 15px;
border-block-width: thin; /* equivalent to 1px */
border-block-width: medium; /* equivalent to 3px */
border-block-width: thick; /* equivalent to 5px */

/* Global values */
border-block-width: inherit;
border-block-width: initial;
border-block-width: revert;
border-block-width: unset;
  • 初始值：中等
  • 应用于：与 border-top-width 相同
  • 继承：否
  • 百分比：n/a
  • 计算值：与相应的 border-*-width 属性相同
  • 规范顺序：根据语法
  • 动画类型：离散

border-block-width 也被认为是一个简写属性，即使它是 border-block 的组成部分。它包括以下属性，用于控制元素开始和结束方向中每个单独边框的宽度

  • border-block-start-width：在水平书写模式下为顶部边框的宽度，在垂直从左到右的书写模式下为左侧边框的宽度，在垂直从右到左的书写模式下为右侧边框的宽度。
  • border-block-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-block-style

border-block-style 等同于 border-style，并且以完全相同的方式用于指定围绕元素绘制的线类型。实际上，它也采用完全相同的取值。

/* <'border-block-style'> values */
border-block-style: hidden;
border-block-style: solid
border-block-style: dashed;
border-block-style: dotted;
border-block-style: double;
border-block-style: groove;
border-block-style: ridge;
border-block-style: inset;
border-block-style: outset;

/* Global values */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: unset;
  • 初始值：无
  • 应用于：与 border-top-style 相同
  • 继承：否
  • 百分比：n/a
  • 计算值：与相应的 border-*-style 属性相同
  • 规范顺序：根据语法
  • 动画类型：离散

border-block-style 也被认为是一个简写属性。它包括以下属性，用于控制元素开始和结束方向中每个单独边框绘制的线类型

  • border-block-start-style：在水平书写模式下为顶部边框的样式，在垂直从左到右的书写模式下为左侧边框的样式，在垂直从右到左的书写模式下为右侧边框的样式。
  • border-block-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-block-color

border-block-color 用于指定边框颜色。

border-block-color: yellow;
border-block-color: #F5F6F7;
border-block-color: rgba(170, 50, 220, .6);
border-block-color: hsla(50, 100%, 50%, .6);

/* Global values */
border-block-color: inherit;
border-block-color: initial;
border-block-color: revert;
border-block-color: unset;
  • 初始值：无
  • 应用于：与 border-top-color 相同
  • 继承：否
  • 百分比：n/a
  • 计算值：与相应的 border-*-color 属性相同
  • 规范顺序：根据语法
  • 动画类型：根据计算值类型

border-block-color 也被认为是一个简写属性。它包括以下属性，用于控制元素开始和结束方向中每个单独边框绘制的线类型

  • border-block-start-color：在水平书写模式下为顶部边框的颜色，在垂直从左到右的书写模式下为左侧边框的颜色，在垂直从右到左的书写模式下为右侧边框的颜色。
  • border-block-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-top、border-bottom、border-right 和 border-left 等各个属性。

但是对于逻辑属性，我们使用 border-block-start、border-block-end 来设置各个边框。让我们具体看看这两个属性以及它们的工作原理。

border-block-start

border-block-start 用于设置元素的逻辑“起始”边框。因此，如果我们使用默认的水平从上到下的书写模式，则顶部边框为起始边框，底部边框为结束边框（剧透警告）。

.box {
  border-block-start: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}

但是！如果我们将书写方向更改为垂直从左到右，则起始边缘将旋转 90 度，这使得左侧边框成为起始边框。

而且，如果我们将其切换为垂直从右到左，您可能已经猜到了：右侧边框将成为起始边框。

书写模式起始边框
horizontal-tb顶部边框
vertical-lr左侧边框
vertical-rl右侧边框

border-block-end

border-block-end 与我们刚刚看到的 border-block-start 一样，只是方向相反。因此，如果在水平从上到下的书写模式中，“开始”是顶部边框，“结束”就是底部边框。

.box {
  border-block-end: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}
书写模式结束边框
horizontal-tb底部边框
vertical-lr右侧边框
vertical-rl左侧边框

组成部分到组成部分！

我们刚刚了解了 border-block 如何作为 border-block-start 和 border-block-end 的简写。我们还知道 border-block 使用其他三个属性作为其值

  • border-block-width
  • border-block-style
  • border-block-color

好吧，如果您可以相信，每个属性也是其自身各个属性的简写。我们实际上可以使用这些属性通过在属性名称中插入“start”和“end”来设置元素每个单独边框的宽度、样式和颜色。

起始边框属性作用
border-block-start-width设置“起始”边框的宽度
border-block-start-style设置“起始”边框的线型
border-block-start-color设置“起始”边框的颜色
结束边框属性作用
border-block-end-width设置“结束”边框的宽度
border-block-end-style设置“结束”边框的线型
border-block-end-color设置“结束”边框的颜色

更多信息

进一步阅读

嘘！ 创建一个 DigitalOcean 账户并获得 200 美元的免费信用额度 用于基于云的托管和服务。
此评论线程已关闭。如果您有重要信息需要分享，请 联系我们。

© 2024 . All rights reserved.