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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。