Własność CSS border-image to własność zbiorcza CSS służąca do ustawiania obrazu lub gradientu w tle obramowania elementu.
Definiując tę własność, powinno się dodatkowo zdefiniować kolor obramowania, który będzie widoczny w przypadku nieznalezienia obrazu przez przeglądarkę.
Własność zbiorcza border-image
obejmuje następujące własności indywidualne:
Przykłady
Poniższy element div
ma obramowanie złożone z gwiazdek o szerokości i wysokości 29 pikseli:
Efekt:
Z kolei w poniższym przykładzie tłem obramowania elementu div
jest gradient złożony z trzech kolorów.
Efekt:
Składnia i wartości
Własność border-image
przyjmuje od jednej do pięciu grup wartości odpowiadających jej własnościom składowym. Wartość własności border-image-source
jest obowiązkowa. Pozostałe są opcjonalne. Jeśli któraś z nich zostanie pominięta, to otrzyma wartość domyślną.
Formalna definicja składni własności border-image
:
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
Ta definicja oznacza, że własność border-image
musi mieć zdefiniowaną wartość dla własności border-image-source
, po której może znajdować się wartość własności border-image-slice
.
Następnie po ukośniku może znajdować się wartość własności border-image-width
, po której, po kolejnym ukośniku, mogą znajdować się wartości własności border-image-outset
i border-image-repeat
(rozdzielone tylko spacjami), np.:
Przyjrzymy się składnikom tej deklaracji po kolei:
url("stars.png")
– źródło obrazu (border-image-source
)29 29
– szerokość i wysokość wycinka obrazu (border-image-slice
)/ 40px 20px
– szerokość górnej i dolnej oraz lewej i prawej krawędzi obramowania (border-image-width
)/ 30px
– odległość obrazu obramowania od krawędzi obszaru obramowaniaround stretch
– sposób dostosowania elementów tworzących obramowanie do obramowania (border-image-repeat
)
Grupa elementów ujętych w nawias kwadratowy ([ ]
) jest opcjonalna i może zostać pominięta w całości, dlatego prawidłowy jest także poniższy zapis:
W tej deklaracji CSS mamy zdefiniowane wartości własności border-image-source
(url("stars.png")
), border-image-slice
(29 40
) oraz border-image-repeat
(round space
).
Zastosowanie
Własność border-image
odnosi się do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli (np. tr
, th
, td
), której własność border-collapse
jest ustawiona na collapse
.
Ponadto własność border-image
odnosi się także do pseudoelementu ::first-letter
.
Zastosowanie | Wszystkie elementy HTML z wyjątkiem wewnętrznych elementów tabeli (np. tr , th , td ), której własność border-collapse jest ustawiona na collapse , oraz pseudoelement ::first-letter |
---|---|
Własności składowe | |
Obsługiwane wartości | Zobacz opis poszczególnych własności |
Wartość początkowa | Wartości początkowe odpowiadają wartościom początkowym własności składowych, czyli:
|
Dziedziczenie | Nie |
Specyfikacja | CSS Backgrounds and Borders Module Level 3 – border-image |