CSS 间隙装饰模块 1 级

1. 引言

本节非规范性内容。

CSS Multicol 1 § 4 列间隙与分隔线 允许在 多列容器 的列之间绘制分隔线。 本规范扩展了 column-rule-width、column-rule-style 和 column-rule-color 属性，增加了行方向的等价属性，扩展到其他容器布局，并提供高级控制以决定间隙装饰的绘制方式和位置。

1.1. 值的定义

本规范遵循 CSS 属性定义约定（见 [CSS2]）， 并使用 值定义语法（见 [CSS-VALUES-3]）。 未在本规范中定义的值类型详见 CSS Values & Units [CSS-VALUES-3]。 与其他 CSS 模块的结合可能扩展这些值类型的定义。

除了各自定义处列出的属性特定值外， 本规范定义的所有属性 还接受 CSS 全局关键字 作为属性值。 为了可读性未在此处重复列出。

2. 间隙

CSS 中的多种布局，如 多列容器、弹性盒容器、 网格容器和网格行列容器 会将子元素框彼此并排放置，其间会有 间隙(gap)，也称为gutter（槽）。

在本规范中， 间隙（gap）、列间隙（column gap）和 行间隙（row gap） 依容器类型定义如下：

多列容器

在列方向上， 间隙（列间隙）指每个多列行内相邻列盒之间的槽，见 [CSS-MULTICOL-1]。 在行方向上，间隙（行间隙）指由column-height建立的列盒行之间的 槽，见 [CSS-MULTICOL-2]。

弹性盒容器

在主轴方向 （如row方向弹性盒 column-gap）， 间隙（列间隙）指单个弹性盒行内项目之间的槽。

在交叉轴 （如row方向弹性盒的 row-gap）， 间隙（行间隙）指相邻 弹性盒行之间的槽。

网格容器

行间隙和列间隙 分别指槽在网格行 和网格列之间。 详细见CSS Grid Layout 1 § 10.1 槽：row-gap、column-gap 和 gap 属性。

注：如CSS Box Alignment 3 § 8.1 行与列槽：row-gap 与 column-gap 属性所述， 由justify-content 和 align-content 添加的额外空间也计入间隙大小。

3. 间隙装饰

间隙可以包含间隙装饰， 即在相邻盒之间绘制的可见分隔符（如线）

间隙装饰不占用空间。 也就是说，间隙装饰的存在或宽度不会影响其它内容的位置。 如果间隙装饰宽于其所处间隙，相邻盒会覆盖此装饰， 某些情况下装饰甚至可能超出容器边界。

间隙装饰绘制在容器边框正上方。 对可滚动容器而言， 注意容器的边框和背景不会随内容滚动， 但装饰需要与容器内项目一同滚动。

3.1. 几何

间隙装饰在间隙内以一个或多个间隙装饰线段的形式绘制。

3.1.1. 线段端点

线段端点 是间隙中线上的点，间隙装饰线段 可以从该点开始或结束。端点类型有两种：

• 起始线段端点：线段起始点。
• 终止线段端点：线段终止点。

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

.multi-column {
  column-count: 3;
  column-width: 100px;
  column-height: 50px;
  column-wrap: wrap;
  gap: 20px;
  background: rgb(255 255 128);
}

.multi-column > * {
  height: 100px;
  border: 1px dashed black;
}	

3.1.2. 间隙装饰线段

定义

A gap decoration segment 是通过将一个 start segment endpoint 与一个 end segment endpoint 配对而形成的。 每个 gap 形成一组 gap decoration segments。

在本节中，我们将一个 gap decoration segment s 表示为 s = [s.start, s.end]， 其中 s.start 是该线段的 start segment endpoint， 而 s.end 是该线段的 end segment endpoint。

令 UNION(s1, s2) 等于 [s1.start, s2.end]。

如果对于其端点之间的每个 gap junction， 在间隙两侧存在跨越该连接区所涉及的所有垂直 gaps 的项目， 则一个 gap decoration segment 被称为 被跨跨项目环绕（flanked by spanning items）。

在给定的 gap 的上下文中，一对 segment endpoints a 和 b 被视为 不连续的（discontiguous），如果从 a 到 b 的线段（宽度与该 gap 相同）与容器内的某个子项相交。

算法

3.2. 交叉处断开行为：column-rule-break、row-rule-break 和 rule-break 属性

这些属性设置某个间隙内装饰在容器内项目形成的可见“T”形或“十字”交叉点处分割为线段的行为。 如何应用这些值的具体细节，见确定间隙装饰线段的步骤。

none

间隙装饰不会在可见的“T”形或“十字”交叉点处开始或结束。 而是从间隙一端到另一端绘制一个连续的装饰线。

normal

行为依赖于容器类型。

Grid 容器

间隙装饰会在可见的“T”交叉处开始和结束， 但会穿越可见的“十字”交叉点。

Flex 容器

行为与 none 相同。

多列容器

对 column-rule-break，行为如 intersection。 对 row-rule-break，行为如 none。

intersection

间隙装饰会在可见的“T”形和“十字”交叉点处开始和结束。

该简写属性会把 column-rule-break 和 row-rule-break 同时设置为相同的值。

下面的示例说明了 *-rule-break 属性的各种设置。

.break-normal-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

.break-normal-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: normal;
}

.break-intersection-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: intersection;
}

.break-normal-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

注意每一条 flex 行有自己独立的间隙： 这有两个影响：

1. 相邻 flex 行里的 间隙装饰 互不影响，即使它们的间隙对齐。
2. none 和 normal 显示效果相同。

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

3.3. 调整间隙装饰端点：rule-inset 属性

这些属性可以用于相对于通常决定装饰开始和结束位置的线段端点，偏移间隙装饰的起始和结束点。

边缘线段端点是指创建于容器内容边缘的线段端点。

内部线段端点是指创建于间隙连接区的线段端点。

百分比值相对于交叉间隙宽度进行计算，定义如下：

边缘线段端点

交叉间隙宽度为 0。

内部线段端点

交叉间隙宽度为 间隙连接区在间隙所在同一维度下的尺寸 （行间隙则为水平方向、列间隙则为垂直方向）。

注： 通常为交叉或毗邻间隙上适用的 column-gap 或 row-gap 属性的已用值 。外加因justify-content 或 align-content 添加的额外间距。 但若间隙在重叠区间相交或毗邻时， 交叉间隙宽度由这些区间的并集决定。 见本例。

column-rule-edge-inset-start 和 row-rule-edge-inset-start 属性适用于作为边缘线段端点的start segment endpoints。 column-rule-interior-inset-start 和 row-rule-interior-inset-start 属性适用于作为内部线段端点的 start segment endpoints。 对于这些属性，正值沿间隙轴方向向前偏移，负值向后偏移。

column-rule-edge-inset-end 和 row-rule-edge-inset-end 属性适用于作为边缘线段端点的end segment endpoints。 column-rule-interior-inset-end 和 row-rule-interior-inset-end 属性适用于作为 内部线段端点的 end segment endpoints。 对于这些属性，正值沿间隙轴反方向偏移，负值则向前偏移。

3.3.1. -start 与 -end 简写

这些简写可以使作者实现统一的不对称装饰。

.inset-start-8px-end-0px {
  column-rule-inset-start: 8px;
  column-rule-inset-end: 0px;
}

这些简写属性会将相应的 -edge- 和 -interior- 属性都设置成相同的值。 例如，column-rule-inset-start 同时设置 column-rule-edge-inset-start 与 column-rule-interior-inset-start 为相同值。

此简写属性会同时设置 column-rule-inset-start 和 row-rule-inset-start 为相同值。

此简写属性会同时设置 column-rule-inset-end 和 row-rule-inset-end 为相同值。

3.3.2. -edge- 与 -interior- 简写

这些简写允许作者在边缘与内部交叉处实现不同的处理效果。

.inset-edge-0px-interior-negative-5px {
  column-rule-edge-inset: 0px;
  column-rule-interior-inset: -5px;
  column-rule-break: intersection;
}

这些简写会分别设置相应的 -start 和 -end 属性。 例如，column-rule-edge-inset 会同时设置 column-rule-edge-inset-start 与 column-rule-edge-inset-end。 如果只给出一个值，两个属性都设为该值。 如果给出两个值，-start 使用第一个，-end 使用第二个。

此简写属性会同时设置 column-rule-edge-inset 和 row-rule-edge-inset为相同值。

此简写属性会同时设置 column-rule-interior-inset 和 row-rule-interior-inset为相同值。

3.3.3. 通用简写

这些简写允许作者在整个容器内实现统一的处理效果。

.inset-0px {
  column-rule-inset: 0px;
  column-rule-break: intersection;
}

.inset-positive-5px {
  column-rule-inset: 5px;
  column-rule-break: intersection;
}

.inset-negative-5px {
  column-rule-inset: -5px;
  column-rule-break: intersection;
}

.inset-negative-50percent {
  column-rule-inset: -50%;
  column-rule-break: intersection;
}

这些简写设置了对应的边缘和内部的起止值。 值的顺序如下：

edge-start edge-end? [/ interior-start interior-end?]?

省略的值按如下方式补齐：

1. 如果内部值省略，则从边缘值复制。
2. 任何省略的 end 值由对应 start 值补齐。

此简写属性会同时设置 column-rule-inset 和 row-rule-inset为相同值。

3.4. 间隙装饰可见性：rule-visibility-items 属性

这些属性决定间隙装饰线段是否绘制在与空区域相邻的间隙部分。

all

无论相邻区域是否有项目，所有间隙线段都绘制装饰。

around

只要相邻的两个区域有一个被项目占据，则该间隙线段绘制装饰。

between

仅当两个相邻区域都被项目占据时，才在该间隙线段绘制装饰。

该简写属性同时设置 column-rule-visibility-items 和 row-rule-visibility-items 为相同值。

.break-normal-with-all-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: all;
}

.break-normal-with-around-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: around;
}

.break-normal-with-between-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: between;
}

3.5. 间隙装饰重叠：rule-overlap 属性

该属性用于设置重叠的间隙装饰的绘制顺序。

row-over-column

行方向装饰绘制在列方向装饰之上。

column-over-row

列方向装饰绘制在行方向装饰之上。

.row-over-column {
  rule-overlap: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.column-over-row {
  rule-overlap: column-over-row;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

3.6. 分片

CSS Box Alignment 3 § 8.1 Row and Column Gutters: the row-gap and column-gap properties 指出，当间隙与一个 分片断点 重合时，间隙会消失。 因为在这些位置没有间隙， 因此也不会在其中绘制任何 间隙装饰。

4. 颜色、样式与宽度

本节中的属性定义取代在 [CSS-MULTICOL-1] 中具有相同名称的属性定义。

4.1. 间隙装饰颜色：column-rule-color, row-rule-color, 和 rule-color 属性

<line-color-list>          = <line-color-or-repeat>#

<auto-line-color-list>     = <line-color-or-repeat>#? ,
                             <auto-repeat-line-color> ,
                             <line-color-or-repeat>#?

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]# )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]# )

这些属性设置 间隙装饰 的颜色。

该简写属性会把 column-rule-color 和 row-rule-color 设置为相同的值。

4.2. 间隙装饰样式：The column-rule-style, row-rule-style, and rule-style 属性

<line-style-list>          = <line-style-or-repeat>#

<auto-line-style-list>     = <line-style-or-repeat>#? ,
                             <auto-repeat-line-style> ,
                             <line-style-or-repeat>#?

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]# )

这些属性设置 间隙装饰 的样式。 The <line-style> 值的应用方式与 border-style 相同。

该简写属性会把 column-rule-style 和 row-rule-style 设置为相同的值。

4.3. 间隙装饰宽度：The column-rule-width, row-rule-width, and rule-width 属性

<line-width-list>          = <line-width-or-repeat>#

<auto-line-width-list>     = <line-width-or-repeat>#? ,
                             <auto-repeat-line-width> ,
                             <line-width-or-repeat>#?

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]# )

这些属性设置 间隙装饰 的宽度。 不允许使用负值。

该简写属性会把 column-rule-width 和 row-rule-width 设置为相同的值。

4.4. 间隙装饰简写：column-rule、row-rule 与 rule 属性

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

这些 简写属性 分别为 column-rule-width、column-rule-style 与 column-rule-color 属性， 或者分别为 row-rule-width、row-rule-style 与 row-rule-color 属性设置值。

该 简写属性 会把 column-rule 与 row-rule 设为相同的值。

4.5. 值列表与 repeat() 表示法

本节中的每个属性都接受以逗号分隔的值列表。 以这种方式设置多个值允许在给定容器内对间隙装饰进行变化。

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red, blue;

这样的列表可以包含 repeat() 表示法。 与 CSS Grid Layout 1 § 7.2.3 重复行与列：repeat() 表示法 类似，这些表示法允许将表现出重复模式的一系列间隙装饰以更紧凑的形式书写。

repeat() 语法的通用形式大致为：

repeat( [ <integer [1,∞]> | auto ] , <value># )

repeat() 的第一个参数指定重复次数。

<integer>

指定一个 整数重复器。 一个 整数重复器 会将第二个参数中的值列表展开为按第一个参数指定次数重复的序列。

作者可以写入：

column-rule-color: gray, red, blue, red, blue, red, blue, gray;

或者缩写为下列形式，产生相同的颜色序列：

column-rule-color: gray, repeat(3, red, blue), gray;

auto

指定一个 自动重复器。 一个 自动重复器 将用于填充那些 否则不会从列表其他部分获得值的间隙。 在给定的值列表中，最多只能有一个 repeat() 被用作 自动重复器。

延续前例，如果作者不知道最终布局中会有多少列，他们可能会改写为：

column-rule-color: gray, repeat(auto, red, blue), gray;

这将使第一列与最后一列的间隙装饰为灰色， 而中间的列间隙则交替为红与蓝。

repeat() 的第二个参数是一个以逗号分隔的值列表， 该列表中的值是属性（即包含该 repeat() 的属性）所接受的值。

4.6. 将间隙装饰值分配给间隙

间隙装饰在应用 分配 之前，会先应用 间隙折叠。 给定的一组 折叠间隙 恰好消耗一个 间隙装饰；下一个 间隙装饰 会应用到下一个间隙（或下一组 折叠间隙）。 因此，对于装饰目的，折叠间隙 被视为单个 间隙。

4.7. 列表值的插值

1. 展开：将任何 整数重复器 展开为其等价的值列表。
2. 列表插值：对展开后的列表应用 可重复列表 的插值算法，逐项与对应项进行插值。

@keyframes example {
  from { column-rule-width: 10px; }
  to   { column-rule-width: 20px, 40px; }
}

From:   10px, 10px
At 50%: 15px, 25px
To:     20px, 40px

@keyframes example {
  from { column-rule-width: repeat(2, 5px, 10px); }
  to   { column-rule-width: repeat(2, 15px, 20px); }
}

From:    5px, 10px,  5px, 10px
At 50%: 10px, 15px, 10px, 15px
To:     15px, 20px, 15px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 20px, 15px, 20px
To:     20px, 20px, 20px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px, 30px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 25px, 15px, 25px
To:     20px, 30px, 20px, 30px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
}

From:   10px, repeat(auto, 20px), 30px
At 50%: 15px, repeat(auto, 30px), 35px
To:     20px, repeat(auto, 40px), 40px

@keyframes example {
  from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
}

From:   10px, 20px, repeat(auto, 20px, 20px), 30px
At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
To:     20px, 30px, repeat(auto, 40px, 50px), 40px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px) }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px }
}

4.8. 序列化

仅当组件长属性是 重复器对齐 时，column-rule、row-rule 和 rule 简写才会从对应的长属性序列化出来。 如果长属性不是 重复器对齐，则该简写的序列化结果为空字符串。

column-rule: 1px solid red, 2px dashed green, 3px dotted blue;

column-rule-width: 1px, 2px, 3px;
column-rule-style: solid, dashed, dotted;
column-rule-color: red, green, blue;

column-rule: 1px solid red, repeat(2, 2px dashed green);

column-rule-width: 1px, repeat(2, 2px);
column-rule-style: solid, repeat(2, dashed);
column-rule-color: red, repeat(2, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);

column-rule-width: repeat(auto, 1px, 2px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);
column-rule-width: repeat(auto, 3px, 4px, 5px);

column-rule-width: repeat(auto, 3px, 4px, 5px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-style: dashed, dotted, solid;

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: dashed, dotted, solid;
column-rule-color: repeat(2, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-color: repeat(4, red, cyan);

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: repeat(2, solid, dashed);
column-rule-color: repeat(4, red, cyan);

5. 致谢

本规范得以实现要归功于许多人的贡献和反馈，包括： Ahmad Shadeed, Alison Maher, Benoît Rouleau, Elika Etemad, Ian Kilpatrick, Javier Contreras Tenorio, Josh Tumath, Kurt Catti-Schmidt, Lea Verou, Oliver Williams, Rachel Andrew, Sam Davis Omekara Jr., Sebastian Zartner, Tab Atkins-Bittner, and the CSS Working Group members. 特别感谢 Mats Palmgren 起草了间隙装饰的初步提案。

6. 隐私注意事项

本规范尚未报告新的隐私注意事项。

7. 安全注意事项

本规范尚未报告新的安全注意事项。

8. 更改

8.1. 自 17 April 2025 Working Draft 以来的更改

• 规定了当间隙因轨道折叠而重合时的行为。 (Issue 11814)
• 将 rule-paint-order 重命名为 rule-overlap。 (Issue 12540)
• 更新了交点的定义以使用 gutter。 (Issue 12084)
• 更新了尾随间隙装饰的分配，改为使用正向顺序的值。 (Issue 12527)
• 规定了可能包含重复器的值的插值行为。 (Issue 12431)
• 移除了当 column-rule-width 在 column-rule-style 为 none 或 hidden 时计算值为 0 的特殊情况。 (Issue 11494)
• 将 rule-outset 属性更改为 rule-inset 并引入了相关属性。 (Issue 12603, Issue 12848, Issue 8402)
• 将 inset 属性的初始值更新为 0 并移除了 auto 关键字。 (Issue 13137)
• 新增段落澄清：当间隙因片段断点被抑制时，不绘制间隙装饰。 (Issue 11520)
• 更新了当间隙因轨道折叠而重合时的行为。 (Issue 11814)
• 新增了从单独长属性序列化简写的章节。 (Issue 12201)
• 将颜色、宽度和样式长属性更新为使用逗号分隔列表，取代空格分隔列表。 (Issue 12201)
• 新增了关于空网格区域旁边的间隙装饰的章节。 (Issue 12602)
• 澄清对齐空间计入间隙大小。 (Issue 12922)
• 将 break 值 spanning-item 重命名为 normal。 (Issue 13127)
• 刷新示例以反映规范的更改。
• 添加了指向 WPT 测试套件的链接。
• 添加了致谢章节。