CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 column-rule-width 屬性 CSS3 column-rule-color 屬性

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

column-rule-style CSS屬性設(shè)置多列布局中在列之間繪制的規(guī)則的樣式。

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

默認(rèn)值：	none
適用于：	多列元素
繼承：	沒有
可動(dòng)畫制作：	否。請參見動(dòng)畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.columnRuleStyle="dotted"

column-rule-style的使用語法

該屬性的語法如下：

column-rule-style: none | hidden | dotted | dashed | solid | double |  groove | ridge | inset | outset | initial | inherit

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

示例

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;
}

測試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
none	不會(huì)顯示任何規(guī)則。
hidden	不顯示任何規(guī)則。與相同none。
dotted	將規(guī)則顯示為一系列點(diǎn)。
dashed	將規(guī)則顯示為一系列短線段，即破折號(hào)。
solid	將規(guī)則顯示為一條實(shí)線。
double	將規(guī)則顯示為兩條平行的實(shí)線，中間有一些間距。兩條線的總和以及它們之間的間距等于column-rule-width屬性值。
groove	顯示雕刻到頁面中的規(guī)則。它給人以3D的印象，通常是通過創(chuàng)建兩種顏色的陰影來實(shí)現(xiàn)的，而這兩種顏色的陰影要比column-rule-color的顏色稍亮和暗。
ridge	顯示具有相反作用的規(guī)則groove。它還給人以3D的印象，規(guī)則看起來好像是從頁面出來的。
inset	顯示與相同的規(guī)則ridge。
outset	顯示與相同的規(guī)則groove。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素column-rule-style的屬性值。

注意：該column-rule-style屬性基本上采用為定義的值border-style，但是這些值的解釋與折疊邊框模型相同。

瀏覽器兼容性

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

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

進(jìn)一步閱讀

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

相關(guān)屬性：column-width，column-fill，column-gap，column-rule，column-rule-width，column-rule-color，column-span，column-count，columns。

CSS3 column-rule-width 屬性 CSS3 column-rule-color 屬性