⌘K

Ominaisuus border-image-slice

Ominaisuus border-image-slice määrittää selaimelle, mitkä osat kuvasta menevät kulmiin ja mitkä sivuille (ja mikä osa tulee keskustaan). Kulmiin menevät 4 osaa, sivuille menevät 4 osaa ja yksi osa (keskiosa) menee elementin taustaksi (valinnaisesti, avainsana fill).

Lisätietoja katso ominaisuus border-image.

Syntaksi

<+css+> valitsija { border-image-slice: 1:stä 4:ään numeroon | 1:stä 4:ään prosenttiin; } <-css->

Numeroiden ja prosenttien kanssa välilyönnillä erotettuna voi olla avainsana fill.

Arvot

Arvo Kuvaus
prosentit Prosentit lasketaan suhteessa kuvan kokoon. Vaakatasossa suhteessa leveyteen, pystytasossa — suhteessa korkeuteen.
numerot Numerot ovat pikseleitä (bittikarttakuville) tai koordinaatteja (vektorikuville). Mittayksiköitä ei ilmoiteta.
fill Oletuskäyttäytyminen olettaa, että kuvan keskiosa hylätään. Otaaksesi sen käyttöön, täytyy käyttää avainsanaa fill numeroiden tai prosenttien lisäksi.

Parametrien määrä

Siirto voi ottaa 1, 2, 3 tai 4 parametria. Huomaa, että mittayksiköitä siirrolle ei kirjoiteta (esimerkiksi vain 20, eikä 20px). Paksuuden voi myös antaa %:na.

Parametrien lukumäärä Kuvaus
1 Paksuus kaikille sivuille samanaikaisesti.
2 1 2; - 1px ylä- ja alaosalle, 2px vasemmalle ja oikealle.
3 1 2 3; - 1px yläosalle, 2px vasemmalle ja oikealle, 3px alaosalle.
4 1 2 3 4; - 1px yläosalle, 2px oikealle, 3px alaosalle, 4px vasemmalle.

Oletusarvo: 100%(?).

Esimerkki

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

Результат:

Esimerkki

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

Результат:

Katso myös

BackOminaisuus border-image-sourceNextOminaisuus border-image-repeat