Omadus border-image-source
Omadus border-image-source määrab
piiri jaoks kasutatava pildi. Täpsema
informatsiooni jaoks vaadake omadust border-image.
Süntaks
valija {
border-image-source: url(pildi tee);
}
Näide
Omadust border-image-source tuleks
määrata koos border-image-slice-ga:
<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;
}
:
Näide
Kui omadust border-image-slice ei ole määratud,
läheb kogu pilt nurkadesse (kuna border-image-slice
vaikeväärtus on 100%):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Näide
Pildi asemel saab määrata lineaarse gradiendi:
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-image-slice: 30;
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Näide
Kui omadust border-image-slice ei ole määratud,
läheb gradient nurkadesse (kuna border-image-slice
vaikeväärtus on 100%):
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
Näide
Kui määrata omadus border-radius,
siis kahjuks piiri ümardamist ei toimu
(ja gradienti puhul samuti), kuigi efekt
on samuti üsna huvitav:
<div id="elem"></div>
#elem {
border-radius: 100px;
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;
}
:
Vaata ka
-
omadus
border-image,
mis on piiripildi lühend -
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 -
omadus
border-image-outset,
mis määrab piiripildi nihke