Savybė border-image-width

Savybė border-image-width valdo matomos rėmelio dalies plotį, keičia jos mastelį. Jei ši reikšmė yra didesnė už border-width savybės plotį, rėmelio paveikslėlis pasislinks po turiniu.

Norėdami gauti išsamesnės informacijos, žiūrėkite savybę border-image.

Sintaksė

selektorius {
	border-image-width: CSS vienetai | procentai | skaičius | auto;
}

Reikšmės

Reikšmė	Aprašas
CSS vienetai	Reikšmė nurodytais CSS vienetais.
Procentai	Reikšmės procentais, skaičiuojant nuo bloko, kuriam nustatytas rėmelis, dydžio.
Skaičius	Skaitinė reikšmė, iš kurios dauginama `border-width` savybės reikšmė.
`auto`	Raktinis žodis. Jei jis nustatytas, reikšmė yra lygi atitinkamai `border-image-slice` savybės reikšmei. Jei tinkamo dydžio nėra, naudojama `border-width` savybės reikšmė, o paveikslėlis užpildo visą rėmelio kampą, pasislinkdamas po turiniu. Žiūrėkite pavyzdžius, kad geriau suprastumėte.

Numatytoji reikšmė: 1.

Pavyzdys . Skaičius

Nustatykime border-image-width savybės reikšmę į 2, kai pelės žymeklis užvedamas ant elemento. Tuomet rėmelio dydis taps 26px*2 - 2 kartus didesnis nei jos plotis, nustatytas border-width savybe. Rėmelis tuomet persidengs su tekstu (kaip fonas):

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

Pavyzdys . Pakeisime border-image-repeat į round

Ankstesniame pavyzdyje, kai užvedamas pelės žymeklis, rėmelyje nebus sveikas skaičius rombų. Išspręskime tai nustatydami border-image-repeat savybės reikšmę į 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;
}

Pavyzdys . Procentai

Nustatykime border-image-width savybės reikšmę į 50%, kai pelės žymeklis užvedamas ant elemento. Tuomet rėmelio dydis taps 50% nuo bloko dydžio (tai yra du rėmeliai, dešinysis ir kairysis, padengs visą 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;
}

Pavyzdys . Procentai

Nustatykime border-image-width savybės reikšmę į 30%, kai pelės žymeklis užvedamas ant elemento. Tuomet rėmelio dydis taps 30% nuo bloko dydžio:

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

Pavyzdys . Pikseliai

Nustatykime border-image-width savybės reikšmę į 50px, kai pelės žymeklis užvedamas ant elemento:

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

Pavyzdys . Reikšmė auto

Nustatykime border-image-width savybės reikšmę į auto, kai pelės žymeklis užvedamas ant elemento.

Prieš užvedant pelės žymeklį, border-image-width savybė turi reikšmę 1 (numatytąją). Pavyzdyje sąmoningai border-width savybė nustatyta į 52px, o border-image-slice savybė - į reikšmę 26 (auto efektas bus matomas tik jei border-width nėra lygus border-image-slice). Dėl to, kad border-image-width savybė turi reikšmę 1, rėmelio paveikslėlis užims visą border-width savybės plotį, t.y. ištempsis iki 52px. Kai užvedamas pelės žymeklis, border-image-width savybės reikšmė nustatoma į auto ir paveikslėlio plotis taps lygus border-image-slice savybės reikšmei, t.y. 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;
}

Taip pat žiūrėkite

savybė border-image,
kuri yra trumpinys rėmelio-paveikslėliui
savybė border-image-source,
kuri nurodo kelią į rėmelio paveikslėlį
savybė border-image-slice,
kuri padalija rėmelio paveikslėlį
savybė border-image-repeat,
kuri pakartoja rėmelio paveikslėlį
savybė border-image-outset,
kuri nustato rėmelio paveikslėlio poslinkį