Vlastnosť border-image-source
Vlastnosť border-image-source nastavuje
obrázok pre okraj. Pre podrobnejšie informácie
pozrite si vlastnosť border-image.
Syntax
selektor {
border-image-source: url(cesta k obrázku);
}
Príklad
Vlastnosť border-image-source by sa mala
nastavovať spolu s 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;
}
:
Príklad
Ak nie je nastavená vlastnosť border-image-slice,
celý obrázok sa umiestni do rohov (pretože border-image-slice
má predvolenú hodnotu 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;
}
:
Príklad
Namiesto obrázka je možné nastaviť lineárny 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;
}
:
Príklad
Ak nie je nastavená vlastnosť border-image-slice,
gradient sa umiestni do rohov (pretože border-image-slice
má predvolenú hodnotu 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;
}
:
Príklad
Ak nastavíte vlastnosť border-radius,
okraje sa, žiaľ, nezaokrúhlia
(aj v prípade gradientu), hoci efekt
bude tiež celkom zaujímavý:
<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;
}
:
Pozrite tiež
-
vlastnosť
border-image,
ktorá je skratkou pre obrázok okraja -
vlastnosť
border-image-slice,
ktorá rozdeľuje obrázok pre okraj -
vlastnosť
border-image-repeat,
ktorá opakuje obrázok pre okraj -
vlastnosť
border-image-width,
ktorá nastavuje veľkosť obrázka pre okraj -
vlastnosť
border-image-outset,
ktorá nastavuje posun obrázka pre okraj