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
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
<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;
}
:
Esimerkki
<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;
}
:
Katso myös
-
ominaisuus
border-image,
joka on lyhenne rajakuvalle -
ominaisuus
border-image-source,
joka asettaa polun rajan kuvaan -
ominaisuus
border-image-repeat,
joka toisto rajan kuvan -
ominaisuus
border-image-width,
joka asettaa rajan kuvan koon -
ominaisuus
border-image-outset,
joka asettaa rajan kuvan siirron