Border-image - CSS Hileleri | CSS Almanak 2025

border-image bir öğenin kenarlığı olarak bir görüntüyü veya CSS degradesini kullanmanıza izin veren bir steno özelliktir.

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageÖzelliği, iç tablo elemanları hariç, herhangi bir öğe uygulanabilir (örneğin, tr, inci, td) border-collapseolarak ayarlanır collapse.

Özellikleri

border-imageSteno için gerekli olan tek özellik border-image-source. Diğer özellikler, belirtilmezlerse varsayılan olarak başlangıç değerlerine döner. Bunlar border-imagesırayla özellikler:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Bu özellik, sınır görüntüsünün kaynağını belirtir. Bu bir URL, veri URI'si, CSS gradyanı veya satır içi SVG olabilir (ancak satır içi SVG için destek sınırlıdır, SVG kullanım notlarına bakın).

Başlangıç değeri none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Bu özelliğin değerleri, tarayıcıya kenarlığın parçalarını oluşturmak için görüntüyü nerede "dilimleyeceğini" söyler. Görüntü 9 bölüme ayrılmıştır - dört köşe, dört kenar ve merkez.

Ayrıntıları göstermek için büyütülmüş bir "çerçeve" görüntüsünde sekiz kalp. Kırmızı çizgiler dilimleri gösterir.

Bunun mantıksız olduğunu düşünüyorsanız, iyi bir arkadaşsınız. Birkaç yıl önce Eric Myer'in blogunda konuyla ilgili uzun bir tartışma yapıldı ve birçok ön uç geliştirme harikası ağırlık kazandı.

Bu demoda, div sınırı etrafında bir kalp tekrar eder. border-image-sourceResmi tam kalp şekli elemanının her iki tarafında kullanılacak şekilde dilimlenmiş aynı kalp simgesinin sekiz kompozit görüntü vardır.

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem border-image demosu: icon border'a bakın.

Daha Fazla Kullanım Notu

Desteği border-imageiyileştirilmiş olsa da - mevcut tüm tarayıcı sürümlerinde öneksiz olarak destekleniyor - bir geri dönüş borderstili ayarlamak hala faydalı. Yedek kenarlığınız, desteklemeyen tarayıcılarda border-imageveya resim yüklenemediğinde gösterilir.

Diğer bazı sınır özelliklerinden farklı olarak, border-imageanimasyon uygulanamaz. Aynı zamanda şekillendirilemez border-radius.

Bir border-image-sourceve bir bordergenişlik border-image-widthbelirtirseniz veya herhangi bir dilim olmadan, dilimlenmemiş görüntünün tamamı, öğenin dört köşesine, belirlediğiniz genişliğe göre ölçeklendirilerek yerleştirilir.

İlişkili

border
border-collapse
box-sizing

Daha fazla bilgi

border-image CSS Arka Planı ve Kenarlıklar Modülünde Seviye 3 CR
border-image MDN'de
border-image.com, bu araç bir görüntüyü yüklemenize ve doğru elde edene kadar sınır dilimleriyle oynamanıza izin verir, ardından sizin için CSS oluşturur.
Dudley Storey'den Açıklanan Kenar Resmi.

Diğer Demolar

Ayrıca Dudley Storey'den, Pratik sınır resmi: duyarlı resim çerçevesi, bir CodePen demosu. Bu, duyarlı bir görüntü üzerinde bir sınır görüntüsünü mantıklı bir şekilde kullanmaya iyi bir örnektir. Daha küçük ekran boyutlarında "çerçevenin" kaldırıldığına dikkat edin.
SVG ve border-image kullanan gerçek noktalı kenarlıklar, Lucas Lemonnier'den bir Kalem. Çirkin kare "noktalı" kenarlık için bir çözüm, bu yöntem size gerçek yuvarlak noktalar verir!
gradyan düğmesi, bir Pen by CodePen kullanıcısı GSSxGSS. Bir sınır görüntüsü olarak doğrusal bir gradyan için güzel bir örnek.
Film Strip, Nick Pettit tarafından bir Kalem. Belki de en pratik demo değil, bu, yapabileceklerinizin eğlenceli ve gösterişli bir örneğidir border-image.

Tarayıcı Desteği

border-imageonu destekleyen tüm tarayıcılarda orijinal olarak gerekli satıcı önekleri. Artık tüm tarayıcıların en son sürümlerinde öneksiz çalışıyor. Bu tablo, hem en eski önekli desteği hem de geçerli olduğu durumlarda en eski önekli olmayan desteği göstermektedir.