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

cssseçici {
  border-image-source: url(görselin yolu);
}

Örnek

border-image-source özelliği, border-image-slice ile birlikte belirtilmelidir:

html<div id="elem"></div>

css#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):

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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):

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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