The CSS Podcast – 016: Borders
W module modelu prostopadłościennego traktowaliśmy analogię z ramką do opisania każdej sekcji modelu urządzenia.
Ramka obramowania to ramka ramki, a właściwości border
zapewniają szeroki wybór opcji tworzenia takiej ramki w prawie każdym stylu.
Właściwości obramowania
Poszczególne właściwości border
umożliwiają określanie stylu różnych części obramowania.
Styl
Aby wyświetlić obramowanie, musisz zdefiniować border-style
.
Masz do wyboru kilka opcji:
Gdy używasz stylów ridge
, inset
, outset
i groove
, przeglądarka przyciemnia kolor obramowania drugiego wyświetlanego koloru, aby zwiększyć kontrast i głębię.
Działanie to może być różne w zależności od przeglądarki, zwłaszcza w przypadku ciemnych kolorów, np. black
.
W Chrome style obramowania są jednolite, a w Firefoksie zostaną rozjaśnione, a drugi kolor będzie ciemniejszy.
Zachowanie przeglądarki może się też zmieniać w przypadku innych stylów obramowania, dlatego ważne jest przetestowanie witryny w różnych przeglądarkach.
Typowym przykładem tej różnicy jest sposób renderowania stylów dotted
i dashed
przez poszczególne przeglądarki.
Aby ustawić styl obramowania każdej strony pola, możesz użyć znaków border-top-style
, border-right-style
, border-left-style
i border-bottom-style
.
Skrót klawiaturowy
Tak jak w przypadku margin
i padding
, możesz użyć skrótu klawiszowego border
, aby określić wszystkie części obramowań w jednej deklaracji.
.my-element {
border: 1px solid red;
}
Kolejność wartości w skrócie border
to border-width
, border-style
, a następnie border-color
.
Kolor
Kolor możesz ustawić po każdej stronie pola lub po każdej stronie za pomocą border-color
.
Domyślnie używany jest bieżący kolor tekstu pola: currentColor
.
Oznacza to, że jeśli zadeklarujesz tylko właściwości obramowania, np. szerokość, będzie on miał tę obliczoną wartość, chyba że wyraźnie go określisz.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
Aby ustawić kolor obramowania po każdej stronie pola, użyj border-top-color
, border-right-color
, border-left-color
i border-bottom-color
.
Szerokość
Szerokość obramowania to grubość linii. Można ją kontrolować za pomocą border-width
.
Domyślna szerokość obramowania to medium
.
Nie będzie on widoczny, jeśli nie określisz stylu.
Możesz użyć innych nazwanych szerokości, np. thin
lub thick
.
Właściwości border-width
akceptują też jednostkę długości, taką jak px
, em
, rem
lub %
.
Aby ustawić szerokość obramowania po każdej stronie pola, użyj border-top-width
, border-right-width
, border-left-width
i border-bottom-width
.
Właściwości logiczne
W module Właściwości logiczne odkryliśmy, jak odnosi się do przepływu bloku i przepływu wewnętrznego, a nie wyraźnego określenia górnej, prawej, dolnej lub lewej strony.
Możesz także używać granic:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
W tym przykładzie .my-element
ma wszystkie boki zdefiniowane jako ozdobione kropkowaną ramką 2px
w bieżącym kolorze tekstu.
Obramowanie inline-end
jest zdefiniowane jako 2px
, ciągła i czerwona.
Oznacza to, że w przypadku języków zapisywanych od lewej do prawej, np. języka angielskiego, czerwone obramowanie znajduje się po prawej stronie pola.
W przypadku języków zapisywanych od prawej do lewej, np. arabskiego,
czerwone obramowanie znajduje się po lewej stronie pola.
Obsługa przeglądarek jest różna pod względem właściwości logicznych w obramach, więc pamiętaj o sprawdzeniu tej funkcji, zanim z niej skorzystasz.
Promień obramowania
Aby zaokrąglić rogi pola, użyj właściwości border-radius
.
.my-element {
border-radius: 1em;
}
Ten skrót pozwala dodać spójne obramowanie każdego rogu pola.
Tak jak w przypadku innych właściwości obramowania, promień obramowania każdego boku możesz określić za pomocą tych znaków: border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
i border-bottom-left-radius
.
Promień każdego narożnika można też określić w skrócie – w kolejności: lewy górny róg, prawy górny róg, prawy dolny róg, a potem lewy dolny róg.
.my-element {
border-radius: 1em 2em 3em 4em;
}
Zdefiniowanie jednej wartości narożnika oznacza zastosowanie innego skrótu, ponieważ promień obramowania jest podzielony na dwie części: bok pionowy i poziomy.
Oznacza to, że gdy ustawisz border-top-left-radius: 1em
,
ustawisz promień: lewy górny róg góra i promień lewy górny lewy.
Obie właściwości można zdefiniować dla każdego rogu w ten sposób:
.my-element {
border-top-left-radius: 1em 2em;
}
Spowoduje to dodanie wartości border-top-left-top
o wartości 1em
i wartości border-top-left-left
w wysokości 2em
.
Spowoduje to zmianę promienia obramowania lewego górnego na promień eliptyczny zamiast na domyślny promień kołowy.
Możesz definiować te wartości za pomocą skrótu border-radius
, używając elementu /
do definiowania wartości eliptycznych po wartościach standardowych.
Dzięki temu możesz puścić wodze fantazji i tworzyć złożone kształty.
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
Obrazy obramowania
W CSS nie trzeba jedynie stosować obramowania nawiązującego do kresek.
Możesz też użyć dowolnego typu obrazu za pomocą właściwości border-image
.
Dzięki tej właściwości można ustawić obraz źródłowy, sposób przecięcia obrazu, szerokość obrazu, odległość obramowania od krawędzi i sposób powtórzenia obrazu.
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
Właściwość border-image-width
jest podobna do border-width
: pozwala ustawić szerokość obrazu obramowania.
Właściwość border-image-outset
pozwala określić odległość między obrazem obramowania a ramką, która się wokół niego otacza.
border-image-source
border-image-source
(źródło obrazu obramowania) może być wartością url
w przypadku każdego prawidłowego obrazu, który zawiera gradienty CSS.
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
Właściwość border-image-slice
to przydatna właściwość, która umożliwia pocięcie obrazu na 9 części połączonych z 4 linii.
Działa to jak skrót margin
, który pozwala określić wartość przesunięcia górną, prawą, dolną i lewą.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
Po zdefiniowaniu wartości przesunięcia powstaje 9 sekcji obrazu: 4 rogi, 4 krawędzie i sekcja środkowa.
Narożniki są dodawane w rogach elementu z obrazem obramowania.
Krawędzie zostaną zastosowane do krawędzi tego elementu.
Właściwość border-image-repeat
określa sposób wypełniania obszaru przez te krawędzie, a właściwość border-image-width
określa rozmiar wycinków.
Wreszcie słowo kluczowe fill
określa, czy część środkowa, na lewo od wycinka, jest używana jako obraz tła elementu, czy nie.
border-image-repeat
border-image-repeat
określa, w jaki sposób CSS ma powtarzać obraz obramowania.
Działa tak samo jak background-repeat
.
- Wartość początkowa to
stretch
, która rozciąga obraz źródłowy tak, aby wypełnić dostępną przestrzeń. - Wartość
repeat
powoduje ułożenie krawędzi obrazu źródłowego jak najwięcej razy. W tym celu może przycinać obszary brzegowe. - Wartość
round
jest taka sama jak powtórzenia, ale zamiast przycinać obszary krawędzi obrazu, aby dopasować je do jak największej liczby obszarów, rozciąga obraz i powtarza go, aby uzyskać jednolity powtarzanie. - Wartość
space
jest ponownie, taka sama jak powtórzenie, ale dodaje odstęp między każdym regionem krawędzi, aby utworzyć spójny wzorzec.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o granicach
Jaki jest domyślny kolor obramowania?
black
white
currentColor
text-color
i jest domyślnym kolorem obramowania.historicColor
.my-element { border: solid hotpink; }
Jaka jest domyślna szerokość obramowania?
1px
medium
solid
border-style
, a nie border-width
.border-inline: 1px solid
...
border-block
będzie górną i dolną.