Style de règle de colonne - Astuces CSS

Table des matières:

Anonim

La column-rule-stylepropriété CSS spécifie le type de ligne tracée entre les colonnes dans une mise en page multi-colonnes CSS.

La propriété est en quelque sorte limitée en soi. Lorsque nous le déclarons, il trace une ligne entre les colonnes CSS d'une largeur d'un pixel et noire.

.columns ( columns: 2 600px; column-rule-style: solid; )

Les choses deviennent plus intéressantes lorsque nous commençons à combiner column-rule-styleavec d'autres column-rule-propriétés, y compris column-rule-width(pour définir une ligne plus épaisse) et column-rule-color(pour changer la couleur).

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

Ou, hé, nous pouvons simplement utiliser la column-rulepropriété abrégée qui combine les trois dans une seule déclaration:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Syntaxe

column-rule-style: ;
  • Valeur initiale: none
  • S'applique à: conteneurs multi-colonnes
  • Héritée: non
  • Valeur calculée: mot-clé spécifié
  • Type d'animation: discret

Valeurs

column-rule-style accepte les valeurs suivantes:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Démo

Prise en charge du navigateur

C'EST À DIRE Bord Firefox Chrome Safari Opéra
10+ 12+ 3,5+ 4+ 3.2+ 11,5+
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mini
85+ 79+ Non 3.2+ Tout
Source: caniuse

spécification

Module de mise en page multi-colonnes CSS niveau 1 (brouillon de l'éditeur)