CSS column-rule-color用法及代码示例

CSS的column-rule-color属性用于更改列之间的规则颜色。

用法:

column-rule-color:color | initial | inherit

属性值：

color:用于将规则颜色设置为任何有效的CSS颜色。
initial:用于将默认颜色设置为规则。
inherit:在这种情况下，颜色将从其父元素继承。

例：

<!DOCTYPE html> 
  
<html> 
  
  <head> 
    <title> CSS property | column-rule-color </title> 
  
    <!-- column-rule-color CSS property -->
    <style> 
  
      p.one{ 
        column-gap:50px; 
        column-count:3;  
        column-rule-style:solid; 
        column-rule-width:10px; 
        column-rule-color:green; 
        border:1px solid black; 
        text-align:center; 
      } 
  
      p.two{ 
        column-gap:50px; 
        column-count:3;  
        column-rule-style:solid; 
        column-rule-width:10px; 
        column-rule-color:#000080; 
        border:1px solid black; 
        text-align:center; 
      } 
  
      p.three{ 
        column-gap:50px; 
        column-count:3;  
        column-rule-style:solid; 
        column-rule-width:10px; 
        column-rule-color:rgb(0, 191, 255); 
        border:1px solid black; 
        text-align:center; 
      } 
  
      p.four{ 
        column-gap:50px; 
        column-count:3;  
        column-rule-style:solid; 
        column-rule-width:10px; 
        column-rule-color:initial; 
        border:1px solid black; 
        text-align:center; 
      } 
        
    </style> 
  </head> 
    
  <body> 
  
    <!-- column-rule-color:green; property -->
    <p class="one"> 
      Prepare for the Recruitment drive of product  
      based companies like Microsoft, Amazon, Adobe,  
      etc with a free online placement preparation  
      course. The course focuses on various MCQ's   
      & Coding question likely to be asked in the   
      interviews & make your upcoming placement  
      season efficient and successful.  
    </p> 
  
    <!-- column-rule-color:#000080; property -->
    <p class="two"> 
      Prepare for the Recruitment drive of product  
      based companies like Microsoft, Amazon, Adobe,  
      etc with a free online placement preparation  
      course. The course focuses on various MCQ's   
      & Coding question likely to be asked in the   
      interviews & make your upcoming placement  
      season efficient and successful.  
    </p> 
  
    <!-- column-rule-color:rgb(0, 191, 255); property -->
    <p class="three"> 
      Prepare for the Recruitment drive of product  
      based companies like Microsoft, Amazon, Adobe,  
      etc with a free online placement preparation  
      course. The course focuses on various MCQ's   
      & Coding question likely to be asked in the   
      interviews & make your upcoming placement  
      season efficient and successful.  
    </p> 
  
    <!-- column-rule-color:initial; property -->
    <p class="four"> 
      Prepare for the Recruitment drive of product  
      based companies like Microsoft, Amazon, Adobe,  
      etc with a free online placement preparation  
      course. The course focuses on various MCQ's   
      & Coding question likely to be asked in the   
      interviews & make your upcoming placement  
      season efficient and successful.  
    </p> 
  
  </body>   
</html>

输出：
column-rule-color property

支持的浏览器：column-rule-color属性支持的浏览器如下所示；

Google Chrome：50.0、4.0 -webkit-
Internet Explorer：10.0
Firefox：52.0、2.0 -moz-
Opera：37.0、15.0 -webkit-，11.1
Safari：9.0、3.1 -webkit-

参考： Mozilla Developer Network (MDN)

如果发现任何错误或有改进建议，请在下面发表评论。

相关用法

注：本文由纯净天空筛选整理自Husban大神的英文原创作品 CSS | column-rule-color Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。