⌘K

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

<+css+> kichaguli { border-image-slice: kutoka 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

html<div id="elem"></div>
css#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

html<div id="elem"></div>
css#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

BackSifa border-image-sourceNextSifa border-image-repeat