Borders

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

.my-element {
  border: solid hotpink;
}