Sifa border-image-slice
Sifa border-image-slice inabainisha
kwa kivinjari, ni sehemu gani za picha zitakazotumika kwa
pembe, na ni zipi zitakazotumika kwa pande (na sehemu gani
itakuwa ya kati). Pembe hutumia 4
sehemu, pande hutumia 4 sehemu na sehemu moja
(ya kati) hutumika kwa usuli wa kipengele
(hiari, neno muhimu fill).
Kwa habari za kina tafadhali angalia sifa
border-image.
Kisarufu
1-th hadi 4-th nambari | kutoka 1-th hadi 4-th asilimia;
}
<-css->
Kwa nambari na asilimia zilizotengwa na nafasi
inaweza kukaa neno muhimu fill.
Thamani
| Thamani | Maelezo |
|---|---|
| asilimia | Asilimia hukokotolewa kuhusiana na ukubwa wa picha. Usawa kuhusiana na upana, wima — kuhusiana na urefu. |
| nambari | Nambari - hizi ni saizi (kwa picha anuwai) au kuratibu (kwa picha vekta). Vipimo havibainishiwi. |
fill |
Tabia ya chaguo-msingi inadhania kuwa sehemu ya kati
ya picha itatupwa. Ili kuitekeleza,
ni muhimu kutumia neno muhimu fill nyongeza
kwa nambari au asilimia.
|
Idadi ya Vigezo
Uhamisho unaweza kuchukua 1, 2,
3 au 4 vigezo. Tafadhali
zingatia kuwa vitengo vya kipimo kwa
uhamisho haviandikwi (kwa mfano, 20 tu,
wala si 20px). Pia unaweza kubainisha unene kwa %.
| Nambari ya Vigezo | Maelezo |
|---|---|
1 |
Unene kwa pande zote wakati mmoja. |
2 |
1 2; - 1px kwa juu na chini, 2px kwa kushoto na kulia. |
3 |
1 2 3; - 1px kwa juu, 2px kwa kushoto na kulia, 3px kwa chini. |
4 |
1 2 3 4; - 1px kwa juu, 2px kwa kulia, 3px kwa chini, 4px kwa kushoto. |
Thamani ya chaguo-msingi: 100%(?).
Mfano
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Mfano
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Angalia pia
-
sifa
border-image,
ambayo ni kifupi cha mipaka-picha -
sifa
border-image-source,
ambayo huweka anwani ya picha kwa mpaka -
sifa
border-image-repeat,
ambayo hurudia picha kwa mpaka -
sifa
border-image-width,
ambayo huweka ukubwa wa picha kwa mpaka -
sifa
border-image-outset,
ambayo huweka usogezi wa picha kwa mpaka