CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 column-rule-color 屬性 CSS3 column-gap 屬性

CSS3 column-rule 屬性使用方法及示例

olumn-rule CSS屬性指定要在每個列之間繪制的一條直線，即“規(guī)則”。它是設置單個屬性的簡寫屬性，即同時設置column-rule-width，column-rule-style和column-rule-color。

下表為此屬性的用法說明和版本歷史記錄，以及該屬性在javascript腳本中的使用語法。

默認值：	查看全部屬性
適用于：	多列元素
繼承：	沒有
可動畫制作：	是的，因為速記的某些屬性可以設置動畫。請參考動畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.columnRule="3px outset #ff00ff"

column-rule的使用語法

該屬性的語法如下：

column-rule: [ column-rule-width column-rule-style column-rule-color ] | initial | inherit

下面的示例演示了如何使用column-rule屬性。

示例

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

測試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
column-rule-width	設置列之間的規(guī)則寬度。默認值為medium。不允許使用負值。
column-rule-style	設置列之間的規(guī)則樣式。默認值為無
column-rule-color	設置列之間的規(guī)則顏色。默認值為color的元素。
initial	將此屬性設置為其默認值。
inherit	如果指定，則關聯(lián)元素采用其父元素column-rule的屬性值。

瀏覽器兼容性

column-rule屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該屬性。

	Firefox 2+ ^-moz- Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 3.1+ ^-webkit- Opera 11.1+ ^-o-，15+ ^-webkit-

進一步閱讀

請參考以下教程：CSS3多列布局。

CSS3 column-rule-color 屬性 CSS3 column-gap 屬性