border-image-repeat Özelliği

border-image-repeat özelliği, resim olarak belirlenen kenarlığın iç kısmının nasıl tekrarlanacağını belirler. Daha detaylı bilgi için border-image özelliğine bakınız.

Sözdizimi

cssseçici {
  border-image-repeat: stretch | repeat | round;
}

Değerler

Varsayılan değer: stretch.

Parametre Sayısı

1 veya 2 parametre alabilir. Eğer iki parametre belirtilirse, birincisi üst ve alt kenarlık için, ikincisi ise sol ve sağ kenarlık için uygulanır.

Örnek . stretch Değeri

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

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Örnek . repeat Değeri

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

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Örnek . round Değeri

Şu anda normal durumda repeat değeri, üzerine gelindiğinde ise round değeri ayarlanmıştır. Üzerine gelinmeden önce kenarlığa tam sayıda elmas sığmadığına, üzerine gelindiğinde ise tam sayıda sığdığına dikkat edin. round bu şekilde çalışır:

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

css#elem:hover {
  border-image-repeat: round;
}
#elem {
  border-style: solid;
  border-width: 42px;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Örnek . İki Değer

Genişlik için repeat, yükseklik için stretch değeri:

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

css#elem {
  border-image-repeat: repeat stretch;
  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