CSS 间隙装饰模块 第一级

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 中的多种布局，如 多栏容器、弹性容器、网格容器 和 砌体容器 都会将子盒子并排排列，并在它们之间留有间隙（也称为 gutter）。 每个这样的间隙可以包含一个 间隙装饰， 即在相邻盒子之间绘制的可见分隔符（如线条）。

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

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

2.1. 布局与绘制

本规范通常不定义容器布局中间隙的几何形状； 这部分内容由其他规范规定。 请参见 CSS Box Alignment 3 § 8 盒子间的间隙 以获取关于 多栏容器、弹性容器 和 网格容器 的相关定义。

间隙装饰 不会占用空间。 也就是说，间隙装饰 的出现或宽度不会影响其他内容的排布。 如果某个 间隙装饰 的宽度大于其间隙， 任何相邻盒子都会与该装饰重叠， 在某些情况下装饰甚至可能超出容器盒子的范围。间隙装饰 会绘制在容器边框之上。 对于可滚动容器， 注意虽然容器的边框和背景不会随着内容滚动， 但装饰需要随着容器内的项目一起滚动。

在下列每种位置定义了一个 间隙交点：

• 间隙与容器内容边交点的中心。
• 不同方向间隙的交点的中心。

以下示例说明了 间隙交点 的位置， 在每个示例中用洋红色 + 标记。

.grid {
  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;
}

注意： CSS Box Alignment 3 § 8.1 行与列间隙：row-gap 与 column-gap 属性 定义了 弹性容器中交叉方向的间隙是指同一行中相邻弹性项目之间的间隙。 因此，在上面的例子中， 即使 #4 和 #7 的右边缘对齐， #5 和 #8 的左边缘对齐， 这两对项目之间的空间也是两个独立的间隙，因为它们位于不同的行。 所以 #4、#5、#7 和 #8 之间的交点 包含两个位置重合的 间隙交点： 一个在 #4 和 #5 之间间隙的底部， 一个在 #7 和 #8 之间间隙的顶部。

间隙装饰 是依据一对 间隙交点 绘制的， 位于相应间隙的中心并与其边缘平行。

2.2. 将间隙装饰分割为多个线段：column-rule-break、row-rule-break 和 rule-break 属性

设置在可见的“T”或“十字”交点处，如何将某一间隙内的装饰分割为多个线段。 如何具体应用这些值的详细说明请参见确定间隙装饰端点对的步骤。

none

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

spanning-item

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

intersection

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

对这些值进行命名优化。

将 column-rule-break 和 row-rule-break 属性设置为相同的值。

2.2.1. 将间隙交点配对为线段

每对通过上述步骤确定的端点之间都会绘制一个间隙装饰。

以下示例展示了 *-rule-break 属性的不同设置。 为便于比较差异，*-rule-outset 属性都设置为 0。

.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;
  rule-outset: 0px;
}

.break-spanning-item-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: spanning-item;
  rule-outset: 0px;
}

.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;
  rule-outset: 0px;
}

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

注意： 由于 flexbox 没有跨越项的概念， spanning-item 在 flexbox 上的效果与 none 相同。

.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;
  rule-outset: 0px;
}

2.3. 调整间隙装饰端点：column-rule-outset、row-rule-outset 和 rule-outset 属性

这些属性可用于相对于通常由间隙交点确定的端点，偏移间隙装饰的端点。 50% 的初始值会将间隙装饰端点放在交点中心。 取值为 0 时，间隙装饰端点会与交点边缘重合。 正值向交点中心延伸； 负值则远离交点中心。 这些偏移同样适用于容器边缘， 此时正值可能会超出容器内容区。

将column-rule-outset和row-rule-outset属性设置为相同的值。

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

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

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

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

在考虑给定间隙内的间隙交点时， 每个交点都被分配一个交叉间隙宽度，定义如下：

容器内容边缘处

交叉间隙宽度为0。

与其他间隙的交点处

交叉间隙宽度为column-gap或row-gap属性的使用值， 以适用于交叉间隙为准。

关于如何应用偏移量的详细信息， 请参见确定间隙装饰端点对的步骤。

2.4. 间隙装饰绘制顺序：rule-paint-order 属性

设置二维容器中间隙装饰的绘制顺序。

以下示例展示了使用rule-paint-order属性调整间隙装饰绘制顺序的效果。

.row-over-coulumn {
  rule-paint-order: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

rule-paint-order: column-over-row;
row-rule: 6px solid red;
column-rule: 6px solid blue;

3. 颜色、样式与宽度

本节中的属性定义将覆盖[CSS-MULTICOL-1]中同名属性的定义。

3.1. 间隙装饰颜色：column-rule-color 和 row-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> ]+ )

<color>

设置间隙装饰的颜色。

3.2. 间隙装饰样式：column-rule-style 和 row-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> ]+ )

这些属性用于设置间隙装饰的样式。 <line-style> 的取值按折叠边框模型解释。

3.3. 间隙装饰宽度：column-rule-width 和 row-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-style 的计算值为 none 或 hidden， 那么 column-rule-width 的计算值为 0。 此行为是为了与CSS Multicol 1 § 4.4 列规则宽度：column-rule-width 属性 向后兼容。

当涉及值列表时，是否应适用“强制为0”行为？ 如果适用，未对齐的列表应如何处理？

3.4. 值列表与 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() 出现的属性接受。

3.5. 间隙装饰简写：column-rule 和 row-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>

这些简写属性会同时设置对应的宽度、样式和颜色属性。

3.6. 双向间隙装饰简写：rule-color、 rule-style、rule-width 和 rule 属性

这些简写属性会将对应的列和行属性设置为相同的值。

隐私注意事项

目前本规范没有新增的隐私注意事项报告。

安全注意事项

目前本规范没有新增的安全注意事项报告。