column-rule-color CSS屬性設(shè)置在多列布局中的列之間繪制的所有規(guī)則的顏色。
下表為此屬性的用法說(shuō)明和版本歷史記錄,以及該屬性在javascript腳本中的使用語(yǔ)法。
| 默認(rèn)值: | 當(dāng)前color元素值 |
|---|---|
| 適用于: | 多列元素 |
| 繼承: | 沒(méi)有 |
| 可動(dòng)畫制作: | 是。請(qǐng)參考 動(dòng)畫屬性。 |
| 版本: | CSS3的新功能 |
| JavaScript語(yǔ)法: | object.style.columnRuleColor="#ff00ff" |
該屬性的語(yǔ)法如下:
column-rule-color: color | initial | inherit
下面的示例演示了如何使用column-rule-color屬性。
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule-color: red;
-webkit-column-rule-width: 2px;
-webkit-column-rule-style: solid;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule-color: red;
-moz-column-rule-width: 2px;
-moz-column-rule-style: solid;
column-count: 3;
column-gap: 100px;
column-rule-color: red;
column-rule-width: 2px;
column-rule-style: solid;
}測(cè)試看看?/?下表描述了此屬性的值。
| 值 | 描述 |
|---|---|
| color | 指定列規(guī)則的顏色。接受任何有效的CSS顏色值。 |
| initial | 將此屬性設(shè)置為其默認(rèn)值。 |
| inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素column-rule-color的屬性值。 |
column-rule-color屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào);所有主流瀏覽器均支持該屬性。
|
請(qǐng)參考以下教程:CSS3多列布局。
相關(guān)屬性:column-width,column-fill,column-gap,column-rule,column-rule-width,column-rule-style,column-span,column-count,columns。