Omadus border-image-outset
Omadus border-image-outset võimaldab
nihutada raami väljapoole elementi. Väärtusena
määratakse number ilma mõõtühikuteta
või mis tahes suuruse
ühikud, välja arvatud protsendid. Kui on määratud
number ilma ühikuteta, siis on see kordaja,
millega korrutatakse omaduse border-width
väärtusi.
Negatiivsed väärtused ei ole toetatud.
Täpsema teabe saamiseks piiripiltide
kohta vaadake omadust border-image.
Süntaks
selektor {
border-image-outset: positiivne number;
}
Näide . Number
Määrame border-image-outset
väärtuseks 3 elemendile hiirega viibimisel.
Sel juhul nihkub piir 26px*3 võrra -
3 korda kaugemale kui selle laius, mis on määratud
omaduses border-width:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
Näide . Pikslid
Määrame border-image-outset
väärtuseks 30px elemendile hiirega viibimisel.
Sel juhul nihkub piir 30px võrra:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
Vaata ka
-
omadus
border-image,
mis on piiripildi lühend -
omadus
border-image-source,
mis määrab tee piiripildile -
omadus
border-image-slice,
mis lõikab piiripildi osadeks -
omadus
border-image-repeat,
mis kordab piiripilti -
omadus
border-image-width,
mis määrab piiripildi suuruse