Właściwość border-image

Właściwość border-image ustawia obrazek dla obramowania, jest właściwością skrótową dla właściwości border-image-source, border-image-slice, border-image-repeat, border-image-width i border-image-outset. Jednak właściwość-skrót pojawiła się w CSS wcześniej niż właściwości składowe i dlatego jest obsługiwana w większej liczbie starych przeglądarek.

Składnia

selektor {
	border-image: url(ścieżka do obrazka) przesunięcie/grubość/odsunięcie powtarzanie;
}

Opis

Obrazek, który chcemy zastosować dla obramowania, musi być specjalnie zaprojektowany: 4 mini obrazki dla narożników i 4 obrazki dla boków. Przykład takiego obrazka:

W tym przypadku część centralna pozostaje biała (ponieważ nie chcemy, aby nakładała się na tło elementu). Przykład obrazka z wypełnioną częścią centralną:

Wartość slice wskazuje przeglądarce, które części obrazka pójdą na narożniki, a które na boki (i która część będzie centralna). Na narożniki idą 4 części, na boki idą 4 części i jedna część (centralna) idzie na tło elementu (opcjonalnie, słowo kluczowe fill).

Obrazek jest "rozcinany" na kawałki w następujący sposób: dla wartości slice podaje się od jednej do czterech wartości. Przeanalizujmy to na przykładzie. Niech zostaną podane następujące wartości: 10 20 30 40 (piksele px nie są podawane, jest to związane z tym, że obrazek może być zarówno rastrowy jak i wektorowy). Wartości mówią o następującym: 10 odciąć z góry, 20 odciąć z prawej, 30 odciąć z dołu, 40 odciąć z lewej. Która część obrazka trafi do lewego górnego narożnika? Będzie to kawałek: 10 z góry, 40 z lewej. Do prawego górnego narożnika trafi 10 z góry, 20 z prawej. I tak dalej.

Najczęściej obrazek jest symetryczny (jak romby powyżej) i musimy odciąć równe kawałki na narożniki. W takim przypadku podaje się jedną wartość, która będzie określać takie same przesunięcia ze wszystkich stron. Aby odciąć pomarańczowe romby, podamy slice jako 26 (ponieważ pomarańczowy romb ma rozmiar 26px na 26px). Żółte romby trafią na linie obramowania i stanie się z nimi następująca rzecz: one lub rozciągną się na cały blok lub będą powtarzane wzdłuż obramowania (zależy od wartości repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Właściwość border-image nie pozwala ustawić grubości obramowania elementu. Przeglądarka po prostu rozciąga obrazek wzdłuż obramowania z już istniejącą szerokością. Dlatego trzeba ją ustawić za pomocą właściwości border.

Użytkownicy starych przeglądarek (lub z wyłączonymi obrazkami) zobaczą standardową ramkę, ustawioną w border, dlatego warto ustawić jej odpowiedni styl i kolor.

Wartości

Wartość	Opis
url(Ścieżka do obrazka)	Ścieżka do obrazka. Więcej szczegółów patrz `border-image-source`.
przesunięcie	Wskazuje przeglądarce, które części obrazka pójdą na narożniki, a które na boki (i która część będzie centralna). Dopuszczalne wartości: od `1`-ej do `4`-ech liczb \| od `1`-ej do `4`-ech procentów. Przez spację można podać słowo kluczowe `fill` dodatkowo do liczb lub procentów. Więcej szczegółów patrz `border-image-slice`.
grubość	Właściwość kontroluje szerokość widocznej części ramki, skaluje ją. Jeśli ta wartość jest większa niż szerokość `border-width`, obrazek ramki wpełznie pod zawartość. Dopuszczalne wartości: jednostki CSS \| procenty \| liczba \| `auto`. Więcej szczegółów patrz `border-image-width`.
odsunięcie	Ciekawa właściwość, pozwalająca odsunąć ramkę poza element. Wartości ujemne nie są obsługiwane. Dopuszczalne wartości: jednostki CSS (oprócz % (?)) \| liczba dodatnia \| auto. Więcej szczegółów patrz `border-image-outset`.
powtarzanie	Określa, jak powtarzać obrazek na granicach (nie na narożnikach): wyłożyć płytkami lub rozciągnąć. Dopuszczalne wartości: `stretch` \| `repeat` \| `round` \| `space`. Więcej szczegółów patrz `border-image-repeat`.

Wartość domyślna: none 100%/1/0 stretch (url(ścieżka do obrazka) przesunięcie/grubość/odsunięcie powtarzanie).

Przykład . border-image-repeat: wartość repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . border-image-repeat: wartość stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . border-image-repeat: wartość round

Teraz w stanie normalnym ustawiona jest wartość repeat, a po najechaniu - round. Zwróć uwagę, że przed najechaniem na granicę mieści się niecała liczba rombów, a po najechaniu - cała. Tak działa round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . border-image-repeat: dwa słowa

Wartość repeat dla szerokości i stretch dla wysokości:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . Dopasowanie szerokości obrazka do szerokości obramowania

Zwiększmy border-width po najechaniu myszką, przy czym grubość border-image zostawimy taką samą. Rombry rozciągną się na całe obramowanie:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . border-image-slice

Weźmy inny obrazek, w którym różne kawałki nie są równe:

Wskażemy, które części obrazka trzeba odciąć - 25% 30% 10% 20%. Działa to tak: 25% - odstęp z góry, 30% - odstęp z prawej, 10% - odstęp z dołu, 20% - odstęp z lewej. W zasadzie tymi kawałkami odcinamy narożniki. Górny lewy narożnik będzie miał 25% z góry obrazka, i 20% z lewej. Górny prawy narożnik będzie miał 25% z góry obrazka, i 30% z prawej i tak dalej.

Również, jeśli najedziesz myszką na blok, to zadziała słowo kluczowe fill, i centralna część obrazka stanie się tłem naszego bloku:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Przykład

Zróbmy gradientowe obramowanie za pomocą gradientu liniowego:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Przykład . border-image-width

Ustawmy wartość border-image-width na 2 (obrazek obramowania stanie się 2 razy większy niż samo obramowanie) po najechaniu myszką na element (26/2 - podano po ukośniku, przy czym 26 - to wartość border-image-slice). Zwróć uwagę na to, że samo obramowanie nie zwiększyło się, a obrazek obramowania - tak, ponieważ wpełznie pod tekst:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Przykład . border-image-outset

Ustawmy wartość border-image-outset na 3 po najechaniu myszką na element. (26/1/2 - podano po drugim ukośniku, przy czym 26 - to wartość border-image-slice, a - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Zobacz też

właściwość border-image-source,
która ustawia ścieżkę do obrazka dla obramowania
właściwość border-image-slice,
która ustawia podział obrazka dla obramowania
właściwość border-image-repeat,
która ustawia powtarzanie obrazka dla obramowania
właściwość border-image-width,
która ustawia rozmiar obrazka dla obramowania
właściwość border-image-outset,
która ustawia przesunięcie obrazka dla obramowania