HTML | DOM 样式 columnRuleColor 属性

简介

columnRuleColor 属性用于设置多列布局中的列之间的边框颜色。

语法

<style>
  element{
    column-rule-color: color | initial | inherit;
  }
</style>

属性值

• color：表示边框颜色值，可以使用颜色名称、RGB 值、十六进制值等。
• initial：表示将属性设置为默认值。
• inherit：表示继承父元素的属性值。

示例

下面的示例演示如何使用 columnRuleColor 属性设置多列布局中的边框颜色：

<style>
  .container{
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
    column-rule-color: red;
  }
</style>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Curabitur consectetur, enim nec bibendum blandit, quam nulla ullamcorper lectus, at porta odio ligula et turpis.</p>
  <p>Nam convallis tincidunt sapien vel lacinia.</p>
  <p>Nunc nec dapibus neque, quis ultricies ipsum.</p>
  <p>Sed in mi sapien.</p>
  <p>Praesent a lobortis sapien, vitae faucibus quam.</p>
</div>

效果如下：

注意事项

• columnRuleColor 属性必须与 columnRule 属性一同使用才能生效。
• 如果多列布局中没有列之间的边框，columnRuleColor 属性不会生效。