Slog-stolpec-pravilo - CSS-triki

Kazalo:

Anonim

Lastnost column-rule-styleCSS določa vrsto črte, ki je narisana med stolpci v postavitvi CSS z več stolpci.

Nepremičnina je nekako omejena. Ko jo razglasimo, bo narisal črto med stolpci CSS, ki je široka en piksel in črna.

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

Stvari postanejo bolj zanimive, ko začnemo kombinirati column-rule-stylez drugimi column-rule-lastnostmi, med drugim column-rule-width(za nastavitev debelejše črte) in column-rule-color(za spreminjanje barve).

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

Lahko pa preprosto uporabimo column-rulestenografsko lastnost, ki združuje vse tri v eni izjavi:

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

Sintaksa

column-rule-style: ;
  • Začetna vrednost: none
  • Velja za: vsebnike z več stolpci
  • Podedovano: ne
  • Izračunana vrednost: določena ključna beseda
  • Vrsta animacije: diskretna

Vrednote

column-rule-style sprejema naslednje vrednosti:

/* 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;

Demo

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
10+ 12+ 3,5+ 4+ 3,2+ 11,5+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mini
85+ 79+ Ne 3,2+ Vse
Vir: kanius

Specifikacija

Modul postavitve CSS z več stolpci 1. stopnja (urednikov osnutek)