⌘K

Omadus border-image-slice

Omadus border-image-slice määrab brauserile, millised pildi osad lähevad nurkadeks ja millised külgedeks (ja milline osa jääb keskmiseks). Nurki läheb 4 osa, külgi läheb 4 osa ja üks osa (keskmine) läheb elemendi taustaks (valikuline, võtmesõna fill).

Täpsema teabe saamiseks vaadake omadust border-image.

Süntaks

<+css+> selektor { border-image-slice: 1-st kuni 4-ni arvud | 1-st kuni 4-ni protsendid; } <-css->

Arvude ja protsentidega tühikuga eraldatuna võib olla võtmesõna fill.

Väärtused

Väärtus Kirjeldus
protsendid Protsendid arvutatakse pildi suuruse suhtes. Horisontaalsed laiuse, vertikaalsed kõrguse suhtes.
arvud Arvud on pikslid (rastripildi puhul) või koordinaadid (vektorpildi puhul). Mõõtühikuid ei märgita.
fill Vaikimisi käitumine eeldab, et pildi keskmine osa jäetakse kõrvale. Selle kasutamiseks on vaja lisada arvudele või protsentidele võtmesõna fill.

Parameetrite arv

Nihke väärtus võib olla 1, 2, 3 või 4 parameetrit. Pange tähele, et nihke mõõtühikuid ei kirjutata (näiteks lihtsalt 20, mitte 20px). Samuti saab paksust määrata %-des.

Parameetrite arv Kirjeldus
1 Paksus kõikidele külgedele korraga.
2 1 2; - 1px ülemisele ja alumisele, 2px vasakule ja paremale.
3 1 2 3; - 1px ülemisele, 2px vasakule ja paremale, 3px alumisele.
4 1 2 3 4; - 1px ülemisele, 2px paremale, 3px alumisele, 4px vasakule.

Vaikeväärtus: 100%(?).

Näide

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

Результат:

Näide

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

Результат:

Vaata ka

BackOmadus border-image-sourceNextOmadus border-image-repeat