column-rule
Rysuje linię między kolumnami układu wielokolumnowego. Skrót dla grubości, stylu i koloru linii.
- Wartość domyślna
medium none currentcolor- Dziedziczona
- Nie
- Animowalna
- tak, grubość i kolor
- Dotyczy
- kontenery wielokolumnowe
- JavaScript
element.style.columnRule = "1px solid #525252"
Przykład
#.glossary {
columns: 2;
column-gap: 32px;
column-rule: 1px solid #3f3f46;
}
.glossary div {
break-inside: avoid;
margin-bottom: 10px;
}<style>
.glossary { margin: 0; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: #a1a1aa; font-size: 14px; }
</style>
<dl class="glossary">
<div><dt>Selektor</dt><dd>wskazuje elementy, które dostaną styl</dd></div>
<div><dt>Właściwość</dt><dd>cecha, którą zmieniasz, np. color</dd></div>
<div><dt>Wartość</dt><dd>to, co przypisujesz właściwości</dd></div>
<div><dt>Specyficzność</dt><dd>waga selektora, gdy kilka reguł się kłóci</dd></div>
</dl>Definicja i zastosowanie
#Właściwość column-rule rysuje pionową linię między kolumnami kontenera z columns albo column-count. To skrót dla column-rule-width, column-rule-style i column-rule-color, a zapis wygląda tak samo jak przy border, na przykład column-rule: 1px solid #3f3f46.
Linia nie zajmuje miejsca. Leży na środku odstępu ustawionego przez column-gap i go nie poszerza, więc przy grubej linii i wąskim odstępie linia wjedzie pod tekst. Jeśli potrzebujesz więcej powietrza wokół linii, zwiększ column-gap.
Tak jak przy obramowaniu, bez stylu nic się nie pojawi, bo domyślny styl to none. Linie powstają tylko między kolumnami, które mają treść. Nie ma ich przed pierwszą ani za ostatnią kolumną.
Składnia
#column-rule: <grubość> || <styl> || <kolor>;Wartości
#- Cienka, szara, ciągła linia. Klasyczny i dyskretny separator.
- Przerywana linia w kolorze bursztynowym.
- Podwójna linia. Potrzebuje co najmniej 3px grubości, żeby było widać obie kreski.
- Linia z kropek w kolorze błękitnym.
- Brak linii, między kolumnami zostaje sam odstęp.
Wartości w praktyce
#1px solid #525252
.demo { column-rule: 1px solid #525252; }2px dashed #f59e0b
.demo { column-rule: 2px dashed #f59e0b; }6px double #a78bfa
.demo { column-rule: 6px double #a78bfa; }3px dotted #38bdf8
.demo { column-rule: 3px dotted #38bdf8; }none
.demo { column-rule: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Na ciemnym tle wystarczy linia o niskim kontraście, na przykład
#3f3f46. Separator ma porządkować treść, a nie przyciągać wzrok. - Linia nie poszerza odstępu. Przy grubszej linii zwiększ też
column-gap, żeby tekst nie dotykał separatora.
Powiązane hasła
#- columnsDzieli treść elementu na kolumny jak w gazecie. Skrót dla column-width i column-count.
- column-gapUstawia odstęp między kolumnami w kontenerze flex, grid lub wielokolumnowym.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- border-styleUstawia styl linii obramowania: ciągła, przerywana, kropkowana i inne.
Widzisz błąd albo brakuje przykładu? Napisz do nas.