DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！
为了使列更清晰，您可以在每列之间添加一条垂直线。该线位于列间隙的中心。如果您曾经设置过 border 的样式，那么您就可以设置 column-rule 的样式了。
.container {
-webkit-columns: 2 400px;
-moz-columns: 2 400px;
columns: 2 400px;
-webkit-column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
column-rule: 1px solid black;
}此属性是 column-rule-width、column-rule-style 和 column-rule-color 的简写，与 border 的模式相同，并接受相同的值。
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color: black;
-moz-column-rule-color: black;
column-rule-color: black;column-rule-width 可以是长度值，例如 3px，也可以是关键字值，例如 thin。
column-rule-style 可以是任何 border-style 值，例如 solid、dotted 和 dashed。
column-rule-color 可以是任何颜色值。
与 column-gap 不同，column-rule 不会占用空间。如果 column-rule-width 比 column-gap 厚，则规则将扩展到列下方。
垂直规则仅存在于包含内容的列之间。
相关属性
其他资源
浏览器支持
多列布局支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 任意 | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
不要忘记您的前缀！