Svojstvo border-image-source
Svojstvo border-image-source postavlja
sliku za granicu. Za više detalja
pogledajte svojstvo border-image.
Sintaksa
selektor {
border-image-source: url(putanja do slike);
}
Primer
Svojstvo border-image-source treba
postaviti zajedno sa 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
Ako nije postavljeno svojstvo border-image-slice,
ceo pozadinski deo slike će biti postavljen na uglove (jer border-image-slice
podrazumevano ima vrednost 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
Umesto slike, može se postaviti linearni gradijent:
<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
Ako nije postavljeno svojstvo border-image-slice,
gradijent će biti postavljen na uglove (jer border-image-slice
podrazumevano ima vrednost 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
Ako se postavi svojstvo border-radius,
zaobljenje granice, nažalost, neće se desiti
(isto važi i za slučaj sa gradijentom), mada efekat
takođe može biti prilično zanimljiv:
<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;
}
:
Pogledajte takođe
-
svojstvo
border-image,
koje je skraćeni zapis za sliku kao granicu -
svojstvo
border-image-slice,
koje seče sliku za granicu -
svojstvo
border-image-repeat,
koje ponavlja sliku za granicu -
svojstvo
border-image-width,
koje određuje širinu slike za granicu -
svojstvo
border-image-outset,
koje postavlja odmak slike za granicu