⌘K

Īpašība border-image-slice

Īpašība border-image-slice norāda pārlūkprogrammai, kuras attēla daļas tiks izmantotas stūriem un kuras malām (un kura daļa būs centrālā). Stūriem tiek izmantotas 4 daļas, malām tiek izmantotas 4 daļas un viena daļa (centrālā) tiek izmantota elementa fonam (pēc izvēles, atslēgvārds fill).

Lai iegūtu sīkāku informāciju, skatiet īpašību border-image.

Sintakse

<+css+> selektors { border-image-slice: no 1. līdz 4. skaitlim | no 1. līdz 4. procentiem; } <-css->

Ar skaitļiem un procentiem, atdalot ar atstarpēm, var atrasties atslēgvārds fill.

Vērtības

Vērtība Apraksts
procenti Procenti tiek aprēķināti attiecībā pret attēla izmēru. Horizontālie attiecībā pret platumu, vertikālie — attiecībā pret augstumu.
skaitļi Skaitļi ir pikseļi (rastattēlam) vai koordinātas (vektorattēlam). Mērvienības nav norādītas.
fill Noklusējuma uzvedība paredz, ka centrālā daļa attēla tiks atmesta. Lai to izmantotu, jāizmanto atslēgvārds fill papildus skaitļiem vai procentiem.

Parametru skaits

Nobīde var būt 1, 2, 3 vai 4 parametri. Lūdzu, ņemiet vērā, ka mērvienības nobīdei netiek rakstītas (piemēram, tikai 20, nevis 20px). Var norādīt arī biezumu %.

Parametru skaits Apraksts
1 Biezums visām malām vienlaicīgi.
2 1 2; - 1px augšai un apakšai, 2px kreisajai un labajai.
3 1 2 3; - 1px augšai, 2px kreisajai un labajai, 3px apakšai.
4 1 2 3 4; - 1px augšai, 2px labajai, 3px apakšai, 4px kreisajai.

Noklusējuma vērtība: 100%(?).

Piemērs

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

Результат:

Piemērs

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

Результат:

Skatiet arī

BackĪpašība border-image-sourceNextĪpašība border-image-repeat