CSS Kenar Çizgisi Görseli

CSS Kenar Çizgisi Görseli

CSS kullanarak border-image Bu özellik, elementin etrafını sarmak için kullanılan resmi ayarlamak için kullanılır.

CSS border-image özelliği

CSS border-image Bu özellik, normal çerçeve etrafını sarmak yerine kullanılacak resmi belirtmenizi sağlar.

Bu özellik üç bölümden oluşur:

  • Çerçeve olarak kullanılan resim
  • Resmin kesileceği yer
  • Orta kısmın tekrar edilmesi veya gerilmesi gerektiğini tanımlar

Bu resmi ("border.png") kullanacağız

border-image Bu özellik, resmi alır ve onu dokuz bölüme keser, hatta satranç tahtası gibi. Daha sonra köşeleri köşelere yerleştirir ve ayarlarınıza göre tekrarlar veya geriler.

Dikkat:çalışması için border-image etkin çalışır, bu elementin daha da ayarlanması gerekmektedir border Özellik!

Burada, resmin ortası kısmı tekrar edilerek çerçeve oluşturulmuştur:

Resim çerçeve olarak kullanılır!

Bu kod:

Örnek

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Kişisel olarak deneyin

Burada, resmin ortası kısmı çerçeve oluşturmak için gerilmiştir:

Resim çerçeve olarak kullanılır!

Bu kod:

Örnek

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Kişisel olarak deneyin

İpucu:border-image Bu özellik aslında aşağıdaki özelliklerin kısa isim özelliğidir:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - Farklı kesim değerleri

Farklı kesim değerleri çerçeve görünümünü tamamen değiştirebilir:

Örnek 1:

border-image: url(border.png) 50 round;

Örnek 2:

border-image: url(border.png) 20% round;

Örnek 3:

border-image: url(border.png) 30% round;

Bu kod:

Örnek

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Kişisel olarak deneyin

CSS Kenar Çerçeve Resmi Özellikleri

Özellik Açıklama
border-image Tüm border-image-* özelliklerinin kısa isim özelliği olarak kullanılır.
border-image-source Kullanılan çerçeve resminin yolunu belirler.
border-image-slice Kenar çizgisi görselinin nasıl kesileceğini belirtir。
border-image-width Kenar çizgisi görselinin genişliğini belirtir。
border-image-outset Kenar çizgisi görselinin kenar çizgisi kutusunun dışına çıkan miktarını belirtir。
border-image-repeat Kenar çizgisi görselinin tekrar etmesi, yuvarlaklaştırılması还是拉伸。