border-image-source Özelliği
border-image-source özelliği,
kenarlık için görseli belirtir. Daha ayrıntılı bilgi
için border-image
özelliğine bakınız.
Sözdizimi
seçici {
border-image-source: url(görselin yolu);
}
Örnek
border-image-source özelliği,
border-image-slice ile
birlikte belirtilmelidir:
<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;
}
:
Örnek
Eğer border-image-slice özelliği
belirtilmezse, görselin tamamı köşelere yerleşir
(çünkü border-image-slice varsayılan
değeri 100% olarak ayarlanmıştır):
<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;
}
:
Örnek
Görsel yerine doğrusal degrade belirtilebilir:
<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;
}
:
Örnek
Eğer border-image-slice özelliği
belirtilmezse, degrade köşelere yerleşir
(çünkü border-image-slice varsayılan
değeri 100% olarak ayarlanmıştır):
<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;
}
:
Örnek
Eğer border-radius
özelliği belirtilirse, kenarlık yuvarlatılmaz
(degrade durumunda da), ancak yine de oldukça
ilginç bir etki ortaya çıkacaktır:
<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;
}
:
Ayrıca Bakınız
-
kenarlık görseli için kısa yol olan
border-imageözelliği -
kenarlık görselini dilimleyen
border-image-sliceözelliği -
kenarlık görselinin tekrarını belirleyen
border-image-repeatözelliği -
kenarlık görselinin boyutunu belirleyen
border-image-widthözelliği -
kenarlık görselinin dışa kaymasını belirleyen
border-image-outsetözelliği