Lastnost border-image-source
Lastnost border-image-source določa
sliko za obrobo. Za več podrobnosti
glejte lastnost border-image.
Sintaksa
selektor {
border-image-source: url(pot do slike);
}
Primer
Lastnost border-image-source je treba
nastaviti skupaj z border-image-slice:
<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;
}
:
Primer
Če lastnost border-image-slice ni nastavljena,
bo celotna slika uporabljena za vogale (ker je privzeta vrednost
za border-image-slice 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;
}
:
Primer
Namesto slike je mogoče nastaviti linearni gradient:
<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;
}
:
Primer
Če lastnost border-image-slice ni nastavljena,
bo gradient uporabljen za vogale (ker je privzeta vrednost
za border-image-slice 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;
}
:
Primer
Če nastavite lastnost border-radius,
se obrobe na žalost ne bo zaokrožila
(tudi pri gradientu), čeprav bo učinek
precej zanimiv:
<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;
}
:
Glejte tudi
-
lastnost
border-image,
ki je okrajšava za sliko obrobe -
lastnost
border-image-slice,
ki določa rezanje slike za obrobo -
lastnost
border-image-repeat,
ki določa ponavljanje slike za obrobo -
lastnost
border-image-width,
ki določa velikost slike za obrobo -
lastnost
border-image-outset,
ki določa odmik slike za obrobo