CSS border-image Özellik
Örnek
Bir öğenin etrafındaki kenarlık olarak bir görüntü belirtin:
#borderimg {
border-image: url(border.png) 30 round;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik border-image
, bir öğenin çevresinde kenarlık olarak kullanılacak bir görüntü belirlemenize olanak tanır.
border-image özelliği, aşağıdakiler için bir kestirme özelliktir:
- sınır-görüntü-kaynak
- kenarlık-görüntü-dilim
- kenarlık-görüntü genişliği
- sınır-görüntü-başlangıç
- kenarlık-görüntü-tekrar
Atlanan değerler varsayılan değerlerine ayarlanır.
Varsayılan değer: | hiçbiri %100 1 0 esneme |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.borderImage="url(border.png) 30 tur" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Not: Aşağıdaki her bir değer için ayrı tarayıcı desteğine bakın.
CSS Sözdizimi
border-image: source slice width outset repeat|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Farklı dilim değerleri, kenarlığın görünümünü tamamen değiştirir:
#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;
}
İlgili Sayfalar
CSS eğitimi: CSS Kenarlık Resimleri
CSS Referansı: border-image-outset özelliği
CSS Referansı: border-image-repeat özelliği
CSS Referansı: border-image-slice özelliği
CSS Referansı: border-image-source özelliği
CSS Referansı: border-image-width özelliği
HTML DOM referansı: borderImage özelliği