Oszlop-szabály-stílus - CSS-trükkök

Tartalomjegyzék:

Anonim

A column-rule-styleCSS tulajdonság a CSS többoszlopos elrendezés oszlopai közé rajzolt vonal típusát határozza meg.

Az ingatlan önmagában korlátozott. Amikor kijelentjük, egy pixel szélességű és fekete vonalat húz a CSS oszlopok közé.

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

A dolgok érdekesebbé válnak, amikor elkezdjük kombinálni column-rule-stylemás column-rule-tulajdonságokkal, például column-rule-width(vastagabb vonal beállításához) és column-rule-color(a szín megváltoztatásához).

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

Vagy, hé, egyszerűen használhatjuk a column-rulegyorsírást, amely mindhármat egyetlen deklarációban egyesíti:

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

Szintaxis

column-rule-style: ;
  • Kezdő érték: none
  • A következőkre vonatkozik: többoszlopos tartályok
  • Örökölt: nem
  • Számított érték: megadott kulcsszó
  • Animáció típusa: diszkrét

Értékek

column-rule-style a következő értékeket fogadja el:

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

Demó

Böngésző támogatás

AZAZ Él Firefox Króm Szafari Opera
10+ 12+ 3,5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mini
85+ 79+ Nem 3.2+ Összes
Forrás: caniuse

Leírás

CSS többoszlopos elrendezési modul, 1. szint (a szerkesztő tervezete)