Īpašība border-image-width

Īpašība border-image-width kontrolē redzamās robežas daļas platumu, mērogo to. Ja šī vērtība ir lielāka par border-width platumu, robežas attēls ieslīdīs zem satura.

Lai iegūtu sīkāku informāciju, skatiet īpašību border-image.

Sintakse

selektors {
	border-image-width: CSS vienības | procenti | skaitlis | auto;
}

Vērtības

Vērtība	Apraksts
CSS vienības	Vērtība norādītajās CSS vienībās.
Procenti	Vērtības procentos attiecībā pret bloka izmēru, kuram iestatīta robeža.
Skaitlis	Skaitliskā vērtība, ar kuru tiek reizināts `border-width`.
`auto`	Atslēgvārds. Ja tas ir norādīts, vērtība ir vienāda ar atbilstošo `border-image-slice`. Ja nav atbilstoša izmēra, tiek izmantota vērtība `border-width`, un šajā gadījumā attēls aizpilda visu robežas stūri, ieslīdot zem satura. Skatiet piemērus labākai izpratnei.

Noklusējuma vērtība: 1.

Piemērs . Skaitlis

Iestatīsim border-image-width vērtību uz 2 , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 26px*2 - 2 reizes lielāks nekā tās platums, kas norādīts border-width. Robeža šajā gadījumā ieslīdīs zem teksta (kā fons):

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

Piemērs . Mainīsim border-image-repeat uz round

Iepriekšējā piemērā, kad peles kursors atrodas virs elementa, robežā būs nevesels rombu skaits. Izlabosim to, iestatot border-image-repeat uz vērtību 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;
}

Piemērs . Procenti

Iestatīsim border-image-width vērtību uz 50% , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 50% no bloka izmēra (tas nozīmē, ka divas robežas, labā un kreisā, segs visu bloku):

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

Piemērs . Procenti

Iestatīsim border-image-width vērtību uz 30% , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 30% no bloka izmēra:

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

Piemērs . Pikseļi

Iestatīsim border-image-width vērtību uz 50px, kad peles kursors atrodas virs elementa:

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

Piemērs . Vērtība auto

Iestatīsim border-image-width vērtību uz auto, kad peles kursors atrodas virs elementa.

Pirms kursora novietošanas virs border-image-width vērtība ir 1 (pēc noklusējuma). Piemērā border-width speciāli iestatīts uz 52px, un border-image-slice - uz vērtību 26 (auto efekts tiks novērots tikai tad, ja border-width nav vienāds ar border-image-slice). Tāpēc, ka border-image-width ir vērtība 1, robežas attēls aizņems visu border-width platumu, tas ir, izstiepsies uz 52px. Kad peles kursors atrodas virs elementa vērtība border-image-width tiks iestatīta uz auto un attēla platums kļūs vienāds ar vērtību border-image-slice, tas ir, 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;
}

Skatiet arī

īpašība border-image,
kas ir saīsinājums robežas-attēlam
īpašība border-image-source,
kas norāda ceļu uz attēlu robežai
īpašība border-image-slice,
kas sadala attēlu robežai
īpašība border-image-repeat,
kas atkārto attēlu robežai
īpašība border-image-outset,
kas norāda attēla nobīdi robežai