发布时间：2026 年 5 月 15 日
从 149 版开始，Chrome 和 Edge 中提供了 CSS 间距装饰。无需使用边框或伪元素，即可为网格、Flexbox 和多列布局之间的间距设置样式。此功能由 Microsoft Edge 团队和 Google Chrome 团队合作打造。
问题
为布局项之间的间距设置样式一直需要使用变通方法。例如，为各个项添加边框、使用伪元素、使用背景 hack。这些方法存在以下缺点：
- 它们依赖于结构。添加视觉分隔符意味着更改标记或为特定项编写选择器。
- 它们会干扰无障碍功能。额外的 DOM 元素会在不应显示时显示在无障碍树中。
- 它们难以维护。自适应布局会打破间距样式所基于的假设。
- 它们会降低性能。DOM 节点越多，布局工作就越多。
- 它们具有较差的编写人体工程学。通常需要复杂的几何计算才能使它们正常工作。
column-rule 属性用于处理多列布局的间距装饰，但网格和 Flexbox 之前缺少等效功能。
解决方案
网格和 Flexbox 容器现在接受 column-rule。新的 row-rule 属性用于处理水平间距。这些装饰纯粹是视觉效果，不会影响现有布局。如果您在多列布局中使用 column-rule 属性，现有行为保持不变。
例如，以下是一个 Flex 容器，其中包含三个面板，并使用样式列表作为其列规则和行规则：
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
如本示例所示，row-rule 和 column-rule 都接受相同的宽度、样式和颜色简写。使用 rule 简写可一次设置两者。
新属性
不过，我们不仅将 column-rule 引入了其他布局模式，还添加了 row 对等项。我们还引入了用于微调装饰的控件：它们在交点处如何中断、它们与间距边缘的距离、它们相对于项的显示时间，以及如何在间距之间改变样式。规则宽度、颜色和插页也都是可添加动画效果的。
repeat() 语法
间距装饰支持 repeat() 作为其宽度、样式和颜色值。这样，您就可以使用简短的形式在间距之间改变装饰，类似于在网格中用于轨道定义的 repeat() 语法：
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
这会为前两个行间距提供 1 像素的规则，为第三个行间距提供 4 像素的规则，如果间距多于值，则会循环。您还可以直接传递多个值，而无需使用 repeat()。例如，在日历中，每小时和半小时边界的行规则样式交替显示：
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
控制装饰中断
column-rule-break 和 row-rule-break 属性用于控制装饰在间距交点处的行为：
normal（默认）：行为取决于容器类型。如需了解详情，请参阅规范。none：装饰在交点处连续运行。intersection：装饰在行间距和列间距交叉处中断。
例如，如果您在网格容器中将 rule-break 设置为 intersection，则规则会在间距交点处中断，而不是继续：
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
如果您将 rule-break 设置为 none，则规则会在交点处连续运行：
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
您可以在互动式 Playground中试用此值。
扩展或收缩装饰
column-rule-inset 和 row-rule-inset 属性用于控制装饰在间距内的扩展距离。您可以使用简写一次设置所有边的插页，也可以使用 column-rule-inset-cap（适用于没有交叉间距的端点）和 column-rule-inset-junction（适用于与其他间距相交的端点）以不对称方式定位插页。
值可以是长度、百分比或 overlap-join 关键字，该关键字会将间距装饰连接到角。例如，将 rule-inset 设置为 5 像素会将所有装饰向内收缩 5 像素：
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
将 rule-inset-cap 设置为 0 像素，将 rule-inset-junction 设置为 10 像素，可使装饰在容器边缘处齐平，但在交点处内嵌。前面显示的信息中心演示使用了这种方法，并且插页在悬停时会添加动画效果：
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
公开范围
column-rule-visibility-items 和 row-rule-visibility-items 属性用于控制规则何时根据项邻接情况显示：
normal（默认）：取决于容器类型。all：规则显示在每个间距中，即使是空间距也是如此。around：只要有一个或多个相邻项，规则就会显示。between：规则仅显示在两个相邻项之间。
rule-visibility-items 简写可一次设置两者。将 rule-visibility-items 设置为 between 将仅在相邻项之间显示规则：
section {
rule: 2px solid black;
rule-visibility-items: between;
}
另一方面，将 rule-visibility-items 设置为 all 将在每个间距中显示规则，即使是没有相邻项的间距也是如此：
section {
rule: 2px solid black;
rule-visibility-items: all;
}
在实时演示中切换值，看看有什么不同！
为装饰添加动画效果
规则宽度、颜色和插页都是可添加动画效果的。您可以在悬停时或任何其他状态更改时转换它们。前面显示的信息中心演示在悬停时转换了规则颜色和插页：
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
演示
本文中显示的所有演示都可以在 Edge 演示网站上找到。
开发者试用版博文包含更多演示，包括互动式 Playground、汉堡菜单、笔记本布局和带有数独网格的杂志风格布局。
自开发者试用版以来的变化
如果您在开发者试用版（Chrome 139）期间试用了间距装饰，请注意以下变化：
- 该功能默认可用，无需任何标志。
- 某些属性名称已更新，以与最新规范保持一致（例如，
column-rule-outset和row-rule-outset已更改为column-rule-inset和row-rule-inset）。 - 添加了
column-rule-visibility-items和row-rule-visibility-items属性。 - 添加了动画支持。
立即使用间距装饰
间距装饰适用于 Chrome 和 Edge，从 149 版开始。如果您的间距装饰纯粹是装饰性的，则该功能是一种渐进增强；在不支持的浏览器中，间距会正常呈现，且没有可见的装饰。对于尚不支持的浏览器，我们正在开发 Polyfill。
在 Chromium 问题跟踪器 中提交 bug。如需了解更多背景信息，请参阅 CSS 间距装饰规范。
实用链接
- CSS 间距装饰规范
- 开发者试用版博文 (Chrome 139)
- Edge 公告
- GitHub 上的说明