Właściwość border-image-width

Właściwość border-image-width kontroluje szerokość widocznej części obramowania, skaluje je. Jeśli ta wartość jest większa niż szerokość border-width, obrazek obramowania wpełźnie pod zawartość.

Dla bardziej szczegółowych informacji zobacz właściwość border-image.

Składnia

selektor {
	border-image-width: jednostki CSS | procenty | liczba | auto;
}

Wartości

Wartość	Opis
Jednostki CSS	Wartość w podanych jednostkach CSS.
Procenty	Wartości procentowe względem rozmiaru bloku, któremu nadano obramowanie.
Liczba	Wartość liczbowa, przez którą mnożona jest `border-width`.
`auto`	Słowo kluczowe. Jeśli jest ustawione, wartość jest równa odpowiedniemu `border-image-slice`. Jeśli nie ma odpowiedniego rozmiaru, używana jest wartość `border-width`, przy czym obrazek wypełnia cały róg obramowania, wpełzając pod treść. Zobacz przykłady dla lepszego zrozumienia.

Wartość domyślna: 1.

Przykład . Liczba

Ustawmy wartość border-image-width na 2 po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 26px*2 - 2 razy większe niż jego szerokość podana w border-width. Obramowanie wpełźnie wtedy pod tekst (jak tło):

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

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

Przykład . Zmieniamy border-image-repeat na round

W poprzednim przykładzie po najechaniu w obramowaniu nie będzie całkowitej liczby rombów. Naprawmy to, ustawiając border-image-repeat na wartość round:

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

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

Przykład . Procenty

Ustawmy wartość border-image-width na 50% po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 50% od rozmiaru bloku (czyli dwa obramowania, prawe i lewe, pokryją cały blok):

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

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

Przykład . Procenty

Ustawmy wartość border-image-width na 30% po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 30% od rozmiaru bloku:

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

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

Przykład . Piksele

Ustawmy wartość border-image-width na 50px po najechaniu myszką na element:

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

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

Przykład . Wartość auto

Ustawmy wartość border-image-width na auto po najechaniu myszką na element.

Przed najechaniem border-image-width ma wartość 1 (domyślnie). W przykładzie celowo border-width ustawiono na 52px, a border-image-slice - na wartości 26 (efekt z auto będzie obserwowany tylko jeśli border-width nie jest równe border-image-slice). Z powodu, że border-image-width ma wartość 1, obrazek obramowania będzie zajmował całą szerokość border-width, to znaczy rozciągnie się na 52px. Po najechaniu wartość border-image-width ustawi się na auto i szerokość obrazka stanie się równa wartości border-image-slice, czyli 26px:

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

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

Zobacz też

właściwość border-image,
która jest skrótem dla obramowania-obrazka
właściwość border-image-source,
która określa ścieżkę do obrazka dla obramowania
właściwość border-image-slice,
która dzieli obrazek dla obramowania
właściwość border-image-repeat,
która powtarza obrazek dla obramowania
właściwość border-image-outset,
która określa przesunięcie obrazka dla obramowania