CSS 属性

CSS 属性column-rule-width 设置多列布局中各列之间绘制的线条的宽度。

属性值

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

  • <'border-width'>:采用 border-width 值指定的关键字确定规则宽度的。该值可以是 <length> 或关键字 Thin、Medium 或 Thick 之一。

注意:column-rule-style 属性必须在 column-rule- 之前定义.

适用范围

所有 multicol 元素。

语法

column-rule-width = <length> | thin| medium | thick

CSS column-rule-width: thick

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

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

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

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

CSS column-rule-width: 长度值

在以下示例中，column-rule-width 属性用于使用长度值设置规则的宽度:

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

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

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