CSS 属性

CSS 属性column-rule-color 设置多列布局中各列之间绘制的线条的颜色。

属性值

CSS 属性column -rule-color 指定为单个 <'border-style'> 值:

  • <color>:采用确定规则颜色的颜色值。

注意:column-rule-style 属性必须与 column-rule- color 属性一起使用。

适用范围

所有 multicol 元素。

语法

column-rule-color = <color>

CSS column-rule-color: <color> 值

在以下示例中，column-rule-color 属性用于设置规则的蓝色，使用关键字值:

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule-color: blue;
      column-rule-style: dashed;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>column-rule-color 属性</h1>

   <div class="multicol-col-rule">
      <p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html>

CSS column-rule-color: rgb 值

在以下示例中，column-rule-color 属性用于使用 rgb 值设置规则的蓝色:

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule-color: rgb(0,0,255);
      column-rule-style: inset;
      column-rule-width: 5px;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>column-rule-color 属性</h1>

   <div class="multicol-col-rule">
      <p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html>

CSS column-rule-color: hsla 值

在以下示例中，column-rule-color 属性用于使用 hsla 值设置规则的颜色:

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule-color: hsl(100, 70%, 20%, 0.8);
      column-rule-style: dashed;
      column-rule-width: 10px;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>column-rule-color 属性</h1>

   <div class="multicol-col-rule">
      <p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html>

CSS column-rule-color: currentColor 

在以下示例中，column-rule-color 属性用于使用 currentColor 值设置规则的颜色:

<html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      color: green;
      column-rule-color: currentColor;
      column-rule-style: dotted;
      column-rule-width: 5px;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>column-rule-color 属性</h1>

   <div class="multicol-col-rule">
      <p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html>