Vlastnost border-image-source
Vlastnost border-image-source nastavuje
obrázek pro ohraničení. Pro podrobnější
informace vizte vlastnost border-image.
Syntaxe
selektor {
border-image-source: url(cesta k obrázku);
}
Příklad
Vlastnost border-image-source by měla být
nastavena společně 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;
}
:
Příklad
Pokud není nastavena vlastnost border-image-slice,
celý obrázek se umístí do rohů (protože border-image-slice
má výchozí 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;
}
:
Příklad
Místo obrázku lze nastavit lineární 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;
}
:
Příklad
Pokud není nastavena vlastnost border-image-slice,
gradient se umístí do rohů (protože border-image-slice
má výchozí 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;
}
:
Příklad
Pokud nastavíte vlastnost border-radius,
k zaoblení ohraničení bohužel nedojde
(a to ani v případě gradientu), ačkoli efekt
bude také poměrně zají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;
}
:
Viz také
-
vlastnost
border-image,
která je zkratkou pro obrázkové ohraničení -
vlastnost
border-image-slice,
která nastavuje rozřezání obrázku pro ohraničení -
vlastnost
border-image-repeat,
která nastavuje opakování obrázku pro ohraničení -
vlastnost
border-image-width,
která nastavuje velikost obrázku pro ohraničení -
vlastnost
border-image-outset,
která nastavuje posun obrázku pro ohraničení