为列添加样式
由于在多列（multicol）容器内创建的列框是匿名框，因此无法单独为每列设置样式，但我们可以为列之间的间隙和整个容器设置样式。本指南将解释如何更改列之间的间隙和样式规则。
列间隙
列之间的间隙通过 column-gap 或 gap 属性控制。column-gap 属性定义在 多列布局 模块中。gap 属性定义在 盒模型对齐 模块中。这是一个统一的属性，用于定义所有支持间隙的布局（包括 CSS 网格布局 和 CSS 弹性盒布局）中盒之间的间隙。
column-gap 的初始值为 1em，这可以防止列相互重叠。在其他布局方法中，column-gap 作为 gap 的同义词受支持，但初始值为 0。关键字值 normal 将 column-gap 设置为初始值。
您可以使用任何 <length> 值来更改间隙。在下面的示例中，column-gap 设置为 40px。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 40px;
}
column-gap 允许的值是 <length-percentage>，这意味着允许使用百分比。column-gap 的百分比值是作为多列容器宽度的百分比计算的。
列规则
规范定义了 column-rule-width、column-rule-style 和 column-rule-color，并提供了一个简写 column-rule。这些属性的工作方式与 border 属性完全相同：任何 <line-style> 都可以用作 column-rule-style，就像有效的 border-style 一样。
这些属性应用于作为多列容器的元素，因此所有列都将具有相同的规则。规则只绘制在列之间，而不绘制在外边缘。规则也只绘制在有内容的列之间。
在下一个示例中，使用长格式值创建了一个 5px 点状规则，颜色为 rebeccapurple。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-rule-width: 5px;
column-rule-style: dotted;
column-rule-color: rebeccapurple;
}
请注意，规则本身不占用任何空间：宽规则不会将列推开以腾出空间。相反，规则覆盖在间隙上。
下面的示例使用了一个非常宽的 40px 规则和 10px 的间隙。规则显示在列内容的下方。为了在规则两侧留出空间，间隙需要增加到大于 40px。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 10px;
column-rule: 40px solid rebeccapurple;
}
后续步骤
本文详细介绍了当前所有可以设置列框样式的方法。在下一个指南中，我们将探讨如何使容器内的元素 跨越所有列。