CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsübersicht

CSS3 column-rule-width Eigenschaft CSS3 column-rule-color Eigenschaft

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

column-rule-style CSS属性设置多列布局中在列之间绘制的规则的样式。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	none
适用于：	多列元素
继承：	没有
可动画制作：	否。请参见动画属性。
版本：	CSS3的新功能
JavaScript语法：	object.style.columnRuleStyle="dotted"

　column-rule-style的使用语法

此属性的语法如下：

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

Die folgenden Beispiele zeigen, wie man column verwendet-rule-style-Eigenschaft.

Beispiel

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

Testen Sie heraus‹/›

Wert der Eigenschaft

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
none	Zeige keine Regel.
hidden	Zeige keine Regel. Gleich wie none.
dotted	Zeige die Regel als eine Reihe von Punkten.
dashed	Zeige die Regel als eine Reihe von kurzen Linien, d.h. Strichen.
solid	Zeige die Regel als eine gestrichelte Linie.
double	Zeige die Regel als zwei parallele gestrichelte Linien, die einige Abstände haben. Die Summe der beiden Linien sowie der Abstand zwischen ihnen beträgtcolumn-rule-widthWert.
groove	Zeige Regeln, die in die Seite eingeritzt erscheinen. Es gibt auch3Eindruck von D, normalerweise durch Erstellen von Schatten in zwei Farben erreicht, die dunkler sind alscolumn-rule-colorFarbe etwas heller und dunkler.
ridge	Zeige Regeln mit gegenteiligem Effekt wie groove. Es gibt auch3Eindruck von D, so dass die Regeln so aus der Seite heraus scheinen.
inset	Zeige die gleiche Regel wie ridge.
outset	Zeige die gleiche Regel wie groove.
initial	Diese Eigenschaft auf ihren Standardwert setzen.
inherit	Wenn angegeben, verwendet der verknüpfte Element sein column des übergeordneten Elements-rule-Wert der style-Eigenschaft.

Hinweis：diesem column-rule-Die style-Eigenschaft verwendet im Allgemeinen die festgelegten Werteborder-style，aber die Erklärung dieser Werte ist mitKollabierte Rändermodell sind gleich。

Browserkompatibilität

column-rule-Kompatibilität der style-Eigenschaft der Browser, die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

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

Weiterführende Lektüre

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3Mehrfachspaltenlayout。

zusammenhängende Eigenschaften：column-width，column-fill，column-gap，column-rule，column-rule-width，column-rule-color，column-span，column-count，columns。

CSS3 column-rule-width Eigenschaft CSS3 column-rule-color Eigenschaft