by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12316
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、先讲下历史

间隙装饰线其实由来已久，在大多数前端从业人员还未入行的时候就已经支持了，大家如果查看 column-rule 属性的兼容性，会发现极佳。

但是，请注意，column-rule 属性生效是有前提的，那就是只能在Columns布局中有效。

而Columns布局我已经快10年没有在实际项目中使用了。

同时，之前的column-rule 属性所设置的装饰线某种程度上和border属性类似，不能设置缩进，不支持多属性，算不得强大。

所以，column-rule 属性可谓名存实亡。

只有抱紧Flex布局和Grid布局的大腿，column-rule 属性才可以真正迎来春天。

等啊等，等啊等，在2026年的某天，终于，全新的装饰线效果可以在Flex/Grid布局中生效了。

比方说这个演示页面：使用 Gap 装饰实现分屏布局demo

核心CSS代码：

.flex-split {
  gap: 1px;
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
  row-rule-width: 2px;
  row-rule-style: dashed, solid;
  row-rule-color: #d4d0c8;
}
@media (width < 600px) {
  .flex-split { flex-direction: column; }
}

于是，在宽屏下，垂直装饰线效果生效：

手机设备下，则是水平方向的装饰线效果：

比之前使用伪元素，或者插入分隔线元素实现简单多了。

除了基本的分隔线装饰效果，还顺便带来了众多其他强大的特性，例如支持多属性值、交点处如何中断、间距边缘距离控制、repeat()函数语法、动画支持等。

我们一个一个来看下。

二、多属性值和 repeat() 语法

如今，无论是column-rule属性，row-rule属性，亦或是他们的子属性，都支持同时设置多个值，分别表示从开始到结束各自的分隔线样式效果。

且看一个极为简单的案例，HTML和CSS代码如下：

<ul>
  <li>《CSS世界》</li>
  <li>《CSS选择器世界》</li>
  <li>《CSS新世界》</li>
  <li>《HTML并不简单》</li>
</ul>

ul {
  display: flex;
  flex-direction: column;
  gap: .5em;
  row-rule: 2px dashed, dotted;
  row-rule-color: red, blue, green;
}

此时，可见如下图所示的分隔线效果：

我们来看下属性值是如何生效的。

先看row-rule属性。

列表共有四项，所有会有3道分隔线。

1. 2px dashed显然对应第一条线；
2. dotted则对应第二条，然后这里的宽度规则和border属性一致，默认都是medium尺寸，也就是3px，因此，这里实际渲染等同于 3px dotter；
3. row-rule/column-rule的多值属性走的是平铺规则。也就是：
   • 如果仅一个值，那所有的gap线都使用该值；
   • 如果是2个值，则两两循环匹配；
   • 更多数量的值一样不断循环平铺渲染。

   所以，这里，第三条线的样式也是2px dashed。

再看row-rule-color属性，这个很好理解，三条线分别三个颜色，一次是红蓝绿。

那么问题来了，如果我设置4个颜色值，会怎么样呢？

答案是：不会怎么样，超出数量的属性值会被忽略。

repeat()函数

如果分隔线的数量很多，我们一个一个值去设置，会累死人的，代码也啰嗦，此时可以使用repeat()函数简化我们的属性设置。

比方说下面这个案例：row-rule应用repeat()函数demo

核心CSS代码参见下方：

.flex-settings {
  row-gap: 1px;
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
  rule-inset-start: 16px;
}

可得到如下图所示的效果，可以看到，风格线的宽度有着 1px 1px 4px 不断循环渲染的效果。

三、rule-break与交叉中断控制

在一个二维布局中，例如Grid布局，或者设置了flex-wrap:wrap出现换行的Flex布局，同时出现纵向分隔线和横向分隔线是再正常不过的事情。

于是就会出现纵线和横线互相交叉相遇的场景。

默认情况下，两线是相交的，但很多时候，纵横相交的效果并不好快，最好希望互相保留安全距离。

则可以使用CSS rule-break属性，设置rule-break:intersection声明就好了。

请看案例：

<section>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
</section>

section {
  display: grid;
  width: 300px;
  grid: 1fr 1fr / 1fr 1fr 1fr;
  gap: 1rem;
  
  canvas {
    aspect-ratio: 1;
    background: deepskyblue;
    width: 100%;
  }
  
  column-rule: solid red;
  row-rule: solid green;
  /* rule-break: intersection */
}

此时可以看到水平方向和垂直方向的分隔线相交了。

此时，我们给section元素设置rule-break:intersection，原本交叉的地方互相留白了，如下截图所示：

四、分隔线的扩展与收缩

column-rule-inset 和 row-rule-inset 属性用于控制装饰在间距内的扩展距离。

如果无需区分水平和垂直距离，或者水平和垂直距离一致，也可以直接使用 rule-inset 属性。

默认情况下，rule-inset 属性设置的缩进距离是对称的，如果开发者希望变化的距离是不对称的，那么可以使用以下两个CSS属性。

• rule-inset-cap：适用于没有交叉间距的端点的距离设置；
• rule-inset-junction：适用于与其他间距相交的端点的距离设置。

一例胜千言，还是上面的案例，我们分别设置rule-inset-cap和rule-inset-junction的值，来看看最终的渲染效果。

关键CSS代码如下：

section {
  column-rule: solid red;
  row-rule: solid green;
  rule-break: intersection;
  rule-inset-cap: 5px;
  rule-inset-junction: 20px;
}

可以看到，交叉点位置的缩进极大，而四边的端点缩进为5px，明显小一圈，即所谓的不对称缩进。

无论是rule-inset-cap还是rule-inset-junction属性都支持负值，此时装饰线就不是缩进，而是扩张效果。

另外，如果只是希望调整某一个方向的装饰线的缩放效果，可以加上 column- 或者 row- 前缀，例如 column-rule-inset-cap 和 column-rule-inset-junction 属性。

五、分隔线的显示范围控制

还是上面的案例，区别在于Grid布局的子元素只有4项，此时，间隙装饰线的效果就会让人感到困惑。

明明没有元素项，结果却凭空出现了分隔装饰线。

此时就轮到 column-rule-visibility-items 和 row-rule-visibility-items 属性出马了。

如果无需区分方向，则可以使用合写属性 rule-visibility-items，其语法如下：

• normal（默认）：取决于容器类型。根据我的测试，大多数场景下效果和 all 一致。
• all：规则显示在每个间距中，即使是没有元素的间距也是如此。
• around：只要存有一个或多个相邻项，间隙线就会显示。
• between：间隙线仅会出现在两个相邻项之间。

下图示意了 around 和 between 这两个属性值的区别。

相信还是很好理解的。

六、动画、兼容性与结语

间隙分隔线的宽度、颜色和交叉缩进都是可添加动画效果的，具体不展示，这个懂的都懂，设置transition过渡，自然可以看到效果。

下面说下兼容性，Gap装饰是相当新的一个特性，目前只有Chrome 149+ 浏览器才支持，如下截图所示：

唉，东西虽好，但现在还没命享用啊，等过几年兼容性跟上了，前端圈子还不知道变成什么样子呢！

好了，就说这么多吧。

参考文章：

• 间隙装饰：现已在 Chromium 中推出

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12316

（本篇完）