Sarake-sääntö-tyyli - CSS-temppuja

Sisällysluettelo:

Anonim

column-rule-styleCSS ominaisuus määrittää Ratatyyppi joka on erotettava sarakkeita CSS usean sarakkeen asettelun.

Omaisuus on tavallaan rajoitettu yksinään. Kun ilmoitamme sen, se piirtää viivan CSS-sarakkeiden välille, joka on yhden pikselin levyinen ja musta.

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

Asiat muuttuvat mielenkiintoisemmiksi, kun aloitamme yhdistämisen column-rule-stylemuiden column-rule-ominaisuuksien kanssa, mukaan lukien column-rule-width(paksumman viivan asettamiseksi) ja column-rule-color(värin vaihtamiseksi).

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

Tai hei, voimme yksinkertaisesti käyttää column-rulelyhytominaisuutta, joka yhdistää kaikki kolme yhteen ilmoitukseen:

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

Syntaksi

column-rule-style: ;
  • Alkuarvo: none
  • Koskee: monisarakkeisia säiliöitä
  • Peritty: ei
  • Laskettu arvo: määritetty avainsana
  • Animaation tyyppi: erillinen

Arvot

column-rule-style hyväksyy seuraavat arvot:

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

Selaimen tuki

IE Reuna Firefox Kromi Safari Ooppera
10+ 12+ 3,5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Android-selain iOS Safari ooppera Mini
85+ 79+ Ei 3.2+ Kaikki
Lähde: caniuse

Erittely

CSS-monisarakkeinen asettelumoduuli, taso 1 (toimittajan luonnos)