CSS column-rule用法及代碼示例

CSS中的column-rule屬性用於指定列之間規則的寬度，樣式和顏色。

用法:

column-rule:column-rule-width column-rule-style column-rule-color|
initial|inherit;

屬性值：

column-rule-width：此值用於設置列之間的規則寬度。此property-value的默認值為medium。
column-rule-style：此值用於設置列之間的規則樣式。此property-value的默認值為none。
column-rule-color：此值用於設置列之間的規則顏色。此屬性值的默認值是元素的顏色。
initial:此值用於設置此column-rule屬性的默認值。
inherit:此值告訴column-rule屬性從其父級繼承該屬性。

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>The column-rule Property</title> 
      
    <style>  
    .gfg { 
        -webkit-column-count:3;  
        -moz-column-count:3 
        column-count:3; 
          
        -webkit-column-gap:40px;  
        -moz-column-gap:40px;  
        column-gap:40px; 
          
        -webkit-column-rule:4px double #ff00ff;  
        -moz-column-rule:4px double #ff00ff;  
        column-rule:4px double #ff00ff; 
    } 
      
    h1 { 
        color:green; 
    } 
    h1, h2 { 
        text-align:center; 
    } 
    </style> 
</head> 
<body> 
    <h1> 
        GeeksforGeeks 
    </h1> 
    <h2> 
        The column-rule Property 
    </h2> 
      
    <p> 
        The column-rule property sets the width, style,  
        and color of the rule between the columns of  
        the element:
    </p> 
      
    <div class="gfg"> 
        The course is designed for students  
        as well as working professionals to prepare  
        for coding interviews. This course is going  
        to have coding questions from school level  
        to the level needed for product based companies  
        like Amazom, Microsoft, Adobe, etc. 
    </div> 
</body> 
</html>

輸出：

支持的瀏覽器：下麵列出了column-rule屬性支持的瀏覽器；

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-

相關用法

注：本文由純淨天空篩選整理自vt_m大神的英文原創作品 CSS | column-rule Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。