填补空白：一种新的 CSS 分隔符绘制方法
Minding the gaps: A new way to draw separators in CSS
撰写者:
发布于 2025年3月19日
在网页的各个部分之间绘制分隔线是一种常见的设计技巧，它可以帮助组织内容，使其更易于阅读，也更具美感。正如我们将在本文中看到的，现在可以使用 CSS 绘制分隔线，但它们也存在局限性。
在本文中，我们将介绍 CSS gap decorations，这是一个新提案，我们希望得到您的反馈。 如果您对此感兴趣，请阅读本文，并通过提供反馈来帮助我们塑造 CSS 的未来。
现有的解决方案和局限性
使用 border CSS 属性是一种非常常见的绘制分隔符的方法。 但是，它也存在局限性，并且使用当今的 CSS 布局技术（例如 CSS Grid 和 Flexbox）时，使用边框通常会妨碍更简单的代码。
想象一个 Flexbox 容器，其中多个项目水平排列：
一种在项目之间显示垂直分隔符的方法是为每个项目的右侧或左侧添加边框。 此解决方案的一些缺点是：
- 添加边框会更改项目的大小，这可能是不希望的。
- 此技术要求您为第一个或最后一个项目编写特殊代码，以避免在该项目之前或之后绘制额外的边框。
- 边框与项目绑定，而不是与项目所在的布局绑定。 想象一个具有多条换行线的 flexbox 布局。 使用边框，您将无法显示跨越多个换行 flex 线之间的整个水平空间的分隔线。
另一种显示分隔符的方法是使用 ::before 或 ::after 伪元素。 每个 flex 项目都将在自身之前或之后定位一个伪元素，使其位于项目之间。 这样做的一个优点是伪元素支持普通元素的所有样式属性，从而使您可以非常创造性地使用分隔线。 但是，这仍然是一种解决方法，也存在缺点：
- 与以前一样，第一个或最后一个项目需要特殊代码。
- 需要一些复杂的绝对定位代码来定位分隔线，这需要您知道项目之间间隙的大小。
为了使事情更加复杂，想象另一个示例，其中 CSS grid 容器定义了一些行和列，并且一些 grid 项目占据一个单元格，而另一些则跨越多个单元格：
使用 CSS 边框或伪元素在 grid 项目之间添加分隔符可能会很快变得复杂。 如果 grid 是响应式的并且项目不总是占据相同的位置或跨越相同数量的单元格，则尤其如此。
在这种情况下，可以使用的一种解决方法是，通过让 grid 容器的背景颜色透过 grid 间隙显示，并使 grid 项目与页面的背景颜色匹配来人为地绘制分隔符。
body {
background: white;
}
.container {
display: grid;
grid-template: repeat(4, 1fr) / repeat(3, 1fr);
/* Adding a 2px gap between cells. */
gap: 2px;
/* Setting the color of the gap by giving the container a background color. */
background: black;
}
.item {
/* Hiding the background of the container by giving items a background color. */
background: white;
}
这会在 grid 单元格之间产生分隔线的错觉。 此技术解决了先前方法面临的问题，因为 gap CSS 属性处理了知道项目之间空间位置的复杂逻辑。 您不再需要知道在哪里放置边框或伪元素。
但是，这只是一种在某些情况下会失败的解决方法：
- 无法设置分隔线的长度。 这些线将始终填充尽可能多的单元格之间的间隙。
- 如果 grid 包含一个或多个空单元格，则容器的背景颜色将在这些单元格中可见，从而破坏了分隔线的错觉。
- 如果 grid 项目不拉伸并填充其分配的单元格（例如
place-self: center），则 grid 容器的背景颜色也将在间隙区域之外可见。 - 最后，如果您的页面背景不是纯色，则此技术将不起作用。
另一种在布局中内容部分之间绘制线的方法是使用 column-rule CSS 属性，该属性在多列布局中有效。
如果您的内容可以按列布局，并且您只需要这些列之间的分隔符，那么使用多列布局是一个不错的选择。
但是，这仅在多列布局中有效，这可能并不总是正确的解决方案，具体取决于您要实现的目标。 例如，在多列布局中，您无法控制内容在内联方向上的位置，只能控制在块方向上的位置。
The CSS gap decorations proposal
我们正在引入一种新的解决方案来解决上述缺点：CSS gap decorations。
如前所述，您已经可以使用 column-rule CSS 属性（以及相应的 column-rule-* 简写属性）在多列布局中绘制列之间的线条。 使用 CSS gap decorations，我们建议：
- 扩展该属性以应用于其他布局类型，例如 grid 和 flexbox。
- 引入
row-rule属性以与column-rule匹配。 - 扩展这些属性的语法以允许在容器的不同部分中使用不同的 gap decorations。
这是一个示例，演示了建议的 row-rule 属性及其新语法如何允许定义多个装饰：
alternate-red-blue {
display: grid;
grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);
gap: 10px;
row-rule: 1px solid;
row-rule-color: red blue;
}
row-rule-color 属性中的多个颜色值用于交替显示行 gap decorations 的颜色，如下所示：
可以使用类似的语法来定义 grid 的第一行和最后一行上的较粗线条，以及其他行上的较细线条：
.varying-widths {
dispay: grid;
grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);
row-gap: 10px;
row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;
}
该提案还使可以使用其他属性微调 gap decorations。 *-rule-break 和 *-rule-outset 属性控制 gap decorations 相对于容器中项目的开始和结束位置，包括跨越项目。
例如，您可以使 gap decorations 尽可能地沿给定间隙的中心线延伸，或在相交处停止，甚至可以微调装饰与相交之间的偏移量，即使存在跨越 grid 项目时也可以使用。
帮助我们塑造提案
我们对 CSS gap decorations 提案感到兴奋，并希望确保它符合您的需求。 尽早获得开发人员的反馈对于构建有用的 API 和功能至关重要。
要了解有关我们提案的更多信息，请阅读说明。 如果您对此有任何反馈，请在我们的 GitHub 存储库中打开一个问题告诉我们。
我们希望获得更多反馈的一个特定领域是控制 gap decorations 在交叉口的行为。 但是，我们也欢迎您对该提案的任何其他反馈：关于我们可能遗漏的内容、我们可能忽略的方案、何时可以使用它的趣闻轶事，甚至只是一个普通的_“这听起来很酷”_消息的建议。