CSS border-image özelliği

Tanım ve Kullanım

border-image özelliği, aşağıdaki özellikleri ayarlamak için bir kısayol özelliğidir:

Değer atlanırsa, varsayılan değeri ayarlanır.

İpucu:Lütfen border-image-* özelliklerini kullanarak güzel esnek düğmeler oluşturun!

Ayrıca Bakınız:

CSS3 Eğitimi:CSS3 kenarlık

Örnek

Görseli, div elementinin kenarlığı olarak tanımlayın:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Kişisel Deneyimleyin

Sayfa altında daha fazla örnek bulunmaktadır.

CSS Dilbilgisi

border-image: source slice width outset repeat|initial|inherit;

Özellik Değeri

Değer Açıklama Test
border-image-source Kenarlıkta kullanılan görselin yolu.
border-image-slice Görsel kenarlık içe doğru kayması.
border-image-width Görsel kenarlık genişliği.
border-image-outset Kenarlık görsel alanının kenarlığın dışına taşması miktarı.
border-image-repeat Görsel kenarlık, döşenmiş (repeated), dairesel (rounded) veya gerilmiş (stretched) olmalı mıdır? Test

Teknik Ayrıntılar

Varsayılan Değer: none 100% 1 0 stretch
Miras Yeterliliği: hayır
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.borderImage="url(border.png) 30 30 round"

Daha Fazla Örnek

Border-image Düğmesi
Bu örnek, border-image özelliği ile nasıl düğme oluşturulacağını göstermektedir.

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-