Kipengele cha border-image-width

Kipengele border-image-width kinadhibiti upana wa sehemu inayoonekana ya mpaka, kukiweka kiwango. Ikiwa thamani hii ni kubwa kuliko upana wa border-width, picha ya mpaka itaingia chini ya yaliyomo.

Kwa habari za kina tazama kipengele cha border-image.

Kiendesi

kichaguzi {
	border-image-width: Vipimo vya CSS | asilimia | nambari | auto;
}

Thamani

Thamani	Maelezo
Vipimo vya CSS	Thamani kwenye vipimo vilivyobainishwa vya CSS.
Asilimia	Thamani kwa asilimia inayohusiana na ukubwa wa kiblock ambacho kimepewa mpaka.
Nambari	Thamani ya nambari, ambayo inazidishwa na `border-width`.
`auto`	Neno kuu. Ikiwa kimepewa, thamani ni sawa na inayofanana `border-image-slice`. Ikiwa hakuna ukubwa unaofaa, thamani ya `border-width` hutumiwa, wakati huo huo picha inajaza kona nzima ya mpaka, ikiingia chini ya maudhui. Tazama mifano kwa ufahamu bora.

Thamani chaguomsingi: 1.

Mfano . Nambari

Weka thamani ya border-image-width kuwa 2 unapoelekea kipengee kwa kishale cha kikirimia. Wakati huo mpaka utakuwa na ukubwa wa 26px*2 - mara 2 kubwa kuliko upana wake, uliowekwa kwenye border-width. Wakati huo huo mpaka utaingia chini ya maandishi (kama mandharinyuma):

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

Mfano . Badilisha border-image-repeat kuwa round

Katika mfano uliopita, kwa kuelekeza kwenye mpaka hautakuwa na idadi kamila ya almasi. Tusahihishe hili, tukiweka border-image-repeat kuwa na thamani 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;
}

Mfano . Asilimia

Weka thamani ya border-image-width kuwa 50% unapoelekea kipengee kwa kishale cha kikirimia. Wakati huo mpaka utakuwa na ukubwa wa 50% ya ukubwa wa kiblock (hivyo basi mpaka miwili, wa kulia na wa kushoto, utafunika kiblock kizima):

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

Mfano . Asilimia

Weka thamani ya border-image-width kuwa 30% unapoelekea kipengee kwa kishale cha kikirimia. Wakati huo mpaka utakuwa na ukubwa wa 30% ya ukubwa wa kiblock:

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

Mfano . Pikseli

Weka thamani ya border-image-width kuwa 50px unapoelekea kipengee kwa kishale cha kikirimia:

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

Mfano . Thamani auto

Weka thamani ya border-image-width kuwa auto unapoelekea kipengee kwa kishale cha kikirimia.

Kabla ya kuelekeza border-image-width ina thamani 1 (chaguomsingi). Katika mfano kwa makusudi border-width imepewa 52px, na border-image-slice - kwa thamani 26 (athari ya auto itaonekana tu ikiwa border-width si sawa na border-image-slice). Kwa sababu border-image-width ina thamani 1, picha ya mpaka itachukua upana mzima wa border-width, yaani itanyoosha hadi 52px. Unapoelekeza thamani ya border-image-width itawekwa kuwa auto na upana wa picha utakuwa sawa na thamani ya border-image-slice, yaani 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;
}

Angalia pia

kipengele cha border-image,
ambacho ni kifupi cha mpaka-picha
kipengele cha border-image-source,
kinachobainisha anwani ya picha ya mpaka
kipengele cha border-image-slice,
kinachogawa picha ya mpaka
kipengele cha border-image-repeat,
kinachorudia picha ya mpaka
kipengele cha border-image-outset,
kinachobainisha usogeaji wa picha ya mpaka