A border-image-width tulajdonság

A border-image-width tulajdonság a szegény látható részének szélességét vezérli, méretezi azt. Ha ez az érték nagyobb, mint a border-width szélessége, a szegény képe a tartalom alá mászik.

Részletesebb információkért lásd a border-image tulajdonságot.

Szintaxis

szelektor {
	border-image-width: CSS egység | százalék | szám | auto;
}

Értékek

Érték	Leírás
CSS egység	Érték a megadott CSS egységekben.
Százalék	Százalékos értékek a szegénnyel rendelkező blokk méretéhez viszonyítva.
Szám	Számérték, amellyel megszorozzuk a `border-width` értékét.
`auto`	Kulcsszó. Ha meg van adva, az érték megegyezik a megfelelő `border-image-slice` értékkel. Ha nincs megfelelő méret, akkor a `border-width` értékét használja, ekkor a kép kitölti a szegény teljes sarkát, a tartalom alá mászva. A jobb megértés érdekében lásd a példákat.

Alapértelmezett érték: 1.

Példa . Szám

Állítsuk a border-image-width értékét 2-re amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 26px*2 lesz - 2 ször nagyobb, mint a border-width-ban megadott szélessége. Eközben a szegény a szöveg alá kerül (mint a háttér):

<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;
}

Példa . Változtassuk a border-image-repeat értékét round-ra

Az előző példában az egérmutató fölévitelkor a szegényben nem egész számú rombusz lesz. Javítsuk ezt úgy, hogy a border-image-repeat értékét round-ra állítjuk:

<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;
}

Példa . Százalék

Állítsuk a border-image-width értékét 50%-ra amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 50% lesz a blokk méretéhez képest (vagyis a két szegény, a jobb és a bal, magába foglalja az egész blokkot):

<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;
}

Példa . Százalék

Állítsuk a border-image-width értékét 30%-ra amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 30% lesz a blokk méretéhez képest:

<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;
}

Példa . Pixelek

Állítsuk a border-image-width értékét 50px-ra amikor az egérmutató az elem fölé kerül:

<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;
}

Példa . Auto érték

Állítsuk a border-image-width értékét auto-ra amikor az egérmutató az elem fölé kerül.

Az egérmutató fölévitel előtt a border-image-width értéke 1 (alapértelmezés szerint). A példában szándékosan a border-width értéke 52px, a border-image-slice értéke pedig 26 (az auto hatás csak akkor figyelhető meg, ha a border-width nem egyenlő a border-image-slice értékével). Mivel a border-image-width értéke 1, a szegény képe a border-width teljes szélességét fogja kitölteni, azaz 52px-ra nyúlik. Az egérmutató fölévitelével a border-image-width értéke auto-ra vált, és a kép szélessége egyenlő lesz a border-image-slice értékével, azaz 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;
}

Lásd még

a border-image tulajdonság,
ami a képesszegény rövidítése
a border-image-source tulajdonság,
ami a szegény képének elérési útját adja meg
a border-image-slice tulajdonság,
ami a szegény képének felosztását adja meg
a border-image-repeat tulajdonság,
ami a szegény képének ismétlését adja meg
a border-image-outset tulajdonság,
ami a szegény képének eltolását adja meg