Właściwość CSSModel pudełkowy
border-style
Ustawia styl linii obramowania: ciągła, przerywana, kropkowana i inne.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.borderStyle = "dashed"
Przykład
#CSS
.dropzone {
border: 2px dashed #525252;
border-radius: 12px;
}HTML przykładu
<div class="dropzone" style="padding: 24px; text-align: center; color: #a3a3a3;">Upuść tutaj plik z projektem</div>Podgląd
Definicja i zastosowanie
#Właściwość border-style wybiera wygląd linii obramowania. Bez niej obramowanie nie istnieje, bo wartość domyślna to none.
Do dyspozycji są linie ciągłe (solid), przerywane (dashed), kropkowane (dotted) i podwójne (double), a także style trójwymiarowe groove, ridge, inset i outset, dziś używane rzadko.
Style można ustawić osobno dla każdej krawędzi, podając od jednej do czterech wartości.
Składnia
#Składnia
border-style: none | hidden | solid | dashed | dotted | double | groove | ridge | inset | outset;Wartości
#Wartości w praktyce
#solid
Linia ciągła.
.demo { border-style: solid; }dashed
Linia przerywana kreskami.
.demo { border-style: dashed; }dotted
Linia z kropek.
.demo { border-style: dotted; }double
Dwie równoległe linie.
.demo { border-style: double; }groove
Linia wyglądająca na wyżłobioną.
.demo { border-style: groove; }none
Brak obramowania. Grubość jest wtedy traktowana jak 0.
.demo { border-style: 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
#- Przerywane obramowanie to czytelny sygnał dla strefy upuszczania plików albo pustego miejsca na treść.
- Style
groove,ridge,insetioutsetzależą od koloru i często wyglądają przestarzale. Do efektów głębi lepszy jestbox-shadow.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.