Border-image-width հատկություն

border-image-width հատկությունը կառավարում է եզրի տեսանելի մասի լայնությունը, մասշտաբավորում է այն: Եթե այս արժեքը մեծ է border-width-ից, եզրի նկարը կմտնի բովանդակության տակ:

Ավելի մանրամասն տեղեկությունների համար տեսեք border-image հատկությունը:

Շարահյուսություն

ընտրիչ {
	border-image-width: CSS միավորներ | տոկոսներ | թիվ | auto;
}

Արժեքներ

Արժեք	Նկարագրություն
CSS միավորներ	Արժեք նշված CSS միավորներով:
Տոկոսներ	Տոկոսային արժեքներ՝ կապված այն բլոկի չափի հետ, որին տրված է եզրը:
Թիվ	Թվային արժեք, որով բազմապատկվում է `border-width`-ը:
`auto`	Բանալի բառ: Եթե այն տրված է, արժեքը հավասար է համապատասխան `border-image-slice`-ին: Եթե համապատասխան չափ չկա, օգտագործվում է `border-width` արժեքը, այս դեպքում նկարը լցնում է եզրի ամբողջ անկյունը, մտնելով բովանդակության տակ: Լավ հասկանալու համար տեսեք օրինակները:

Լռելյայն արժեքը՝ 1:

Օրինակ . Թիվ

Սահմանենք border-image-width-ի արժեքը 2 տարրի վրա մկնիկի դրվագման ժամանակ: Այս դեպքում եզրը կդառնա 26px*2 չափի - 2 անգամ ավելի մեծ, քան դրա լայնությունը, որը տրված է border-width-ում: Եզրը այս դեպքում կմտնա տեքստի տակ (ինչպես ֆոնը):

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

Օրինակ . Փոխենք border-image-repeat-ը round-ի

Նախորդ օրինակում դրվագման ժամանակ եզրում ռոմբերի ամբողջ թիվ չի լինի: Ուղղենք սա՝ սահմանելով border-image-repeat 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;
}

Օրինակ . Տոկոսներ

Սահմանենք border-image-width-ի արժեքը 50% տարրի վրա մկնիկի դրվագման ժամանակ: Այս դեպքում եզրը կդառնա 50% չափի՝ կապված բլոկի չափի (այսինքն երկու եզրեր, աջը և ձախը, կծածկեն ամբողջ բլոկը):

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

Օրինակ . Տոկոսներ

Սահմանենք border-image-width-ի արժեքը 30% տարրի վրա մկնիկի դրվագման ժամանակ: Այս դեպքում եզրը կդառնա 30% չափի՝ կապված բլոկի չափի:

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

Օրինակ . Պիքսելներ

Սահմանենք border-image-width-ի արժեքը 50px տարրի վրա մկնիկի դրվագման ժամանակ:

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

Օրինակ . Auto արժեք

Սահմանենք border-image-width-ի արժեքը auto տարրի վրա մկնիկի դրվագման ժամանակ:

Դրվագումից առաջ border-image-width-ն ունի 1 արժեք (լռելյայն): Օրինակում հատուկ border-width-ը տրված է 52px, իսկ border-image-slice-ը՝ 26 արժեքով (auto-ի էֆեկտը կդիտվի միայն եթե border-width-ը հավասար չէ border-image-slice-ին): Քանի որ border-image-width-ն ունի 1 արժեք, եզրի նկարը կզբաղեցնի border-width-ի ամբողջ լայնությունը, այսինքն կձգվի 52px: Դրվագման ժամանակ border-image-width-ի արժեքը կսահմանվի auto և նկարի լայնությունը կդառնա հավասար border-image-slice-ի արժեքին, այսինքն 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;
}

Տեսեք նաև

border-image հատկությունը,
որը եզրի-նկարի համար կրճատում է
border-image-source հատկությունը,
որը նշում է նկարի ճանապարհը եզրի համար
border-image-slice հատկությունը,
որը եզրի նկարի բաժանումն է
border-image-repeat հատկությունը,
որը եզրի նկարի կրկնությունն է
border-image-outset հատկությունը,
որը նշում է եզրի նկարի տեղաշարժը