Ihre Suchergebnisse

    column-rule

    Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

    Summary

    In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

    • Initial value the concatenation of the initial values of its longhand properties:
      • column-rule-width: medium
      • column-rule-style: none
      • column-rule-color: currentColor
    • Applies to multicol elements
    • Inherited no
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • column-rule-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
      • column-rule-style: as specified
      • column-rule-width: an absolute length; 0 if the column rule style is none or hidden
    • Animatable as each of the properties of the shorthand:
      • column-rule-color: yes, as a color
      • column-rule-style: no
      • column-rule-width: yes, as a length
    • Canonical order order of appearance in the formal grammar of the values

    Syntax

    Formal syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
    

    Values

    Accepts one, two or three values in any order:

    <'column-rule-width'>
    Is a <length> or one of the three keywords, thin, medium or thick. See border-width for details.
    <'column-rule-style'>
    See border-style for possible values and details.
    <'column-rule-color'>
    Is a <color> value.

    Examples

    p.foo { column-rule: dotted; }          /* same as "medium dotted currentColor" */
    p.bar { column-rule: solid blue; }      /* same as "medium solid blue" */
    p.baz { column-rule: solid 8px; }       /* same as "8px solid currentColor" */
    p.abc { column-rule: thick inset blue; }
    

    Live Example

    padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

    Specifications

    Specification Status Comment
    CSS Multi-column Layout Module Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes)-webkit 3.5 (1.9.1)-moz 10 11.1 3.0 (522)-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? (Yes) ? ? ?

    See also

    Schlagwörter des Dokuments und Mitwirkende

    Zuletzt aktualisiert von: kscarfone,
    Seitenleiste ausblenden