English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-rule-The style CSS property sets the style of the rule drawn between columns in a multi-column layout.
The following table describes the usage and version history of this attribute, as well as its syntax in JavaScript scripts.
| Default value: | none |
|---|---|
| Applies to: | Multi-column elements |
| Inheritance: | None |
| Animatable: | No.See also Animation properties. |
| Version: | CSS3new features |
| JavaScript syntax: | object.style.columnRuleStyle="dotted" |
The syntax of this attribute is as follows:
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
The following example demonstrates how to use column-rule-style attribute.
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;
}Test and see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| none | Do not display any rules. |
| hidden | Do not display any rules. The same as none. |
| dotted | Display the rule as a series of dots. |
| dashed | Display the rule as a series of short line segments, that is, dashes. |
| solid | Display the rule as a solid line. |
| double | Display the rule as two parallel solid lines with some spacing in between. The total of the two lines and the spacing between them is equal tocolumn-rule-widthAttribute value. |
| groove | Display the rules engraved into the page. It gives3The impression of D, usually achieved by creating two colors of shadow, which are darker thancolumn-rule-colorThe color is slightly lighter and darker. |
| ridge | Display the rules with the opposite effect of groove. It also gives3The impression of D, the rules look as if they are coming out of the page. |
| inset | Display the same rules as ridge. |
| outset | Display the same rules as groove. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated element adopts its parent element column-rule-The value of style's attribute. |
Note:this column-rule-The style attribute basically adopts the defined valueborder-style, but the interpretation of these values is different fromCollapsible Border Model is the same.
column-rule-Browser Compatibility of style Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS3Multi-column Layout.
Related Attributes:column-width,column-fill,column-gap,column-rule,column-rule-width,column-rule-color,column-span,column-count,columns.