CSS 属性

CSS 属性column-rule-style 设置多列布局中各列之间绘制的线条的样式。

属性值

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

  • <'border-style'>：采用由 border-style 值指定的关键字来确定规则的样式。

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

适用范围

所有多列元素。

语法

column-rule-style = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

CSS column-rule-style: dotted值

在以下示例中，column-rule-style 属性用于将规则的样式设置为点式:

<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-style 属性(dotted)</h1>

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

CSS column-rule-style: dashed值

在以下示例中，column-rule-style 属性用于将规则的样式设置为虚线:

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

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

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

CSS column-rule-style: groove

在以下示例中，column-rule-style 属性用于将样式设置为规则的凹槽:

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

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

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