border-image Özelliği Temel Özellikler
- CSS Yazımı :
border-image: <görsel-kaynağı> <yükseklik> <genişlik> <yineleme>;- Örnek :
border-image: url("/images/border.png") 30 30 repeat;|border-image: url("/images/border.png") 30 30 stretch;- Öntanımlı Değer :
-
border-image-sourceÖzelliği- Çerçeve görseli kaynağı,
none border-image-sliceÖzelliği- Çerçeve görseli dilimi,
100% border-image-widthÖzelliği- Çerçeve görseli genişliği,
1 border-image-outsetÖzelliği- Çerçeve görseli başlangıcı,
0s border-image-repeatÖzelliği- Çerçeve görseli yineleme,
stretch
- Uygulanabilen Etiketler :
-
border-collopseözelliği'necollapseuygulanmış iç tablolar dışındaki tüm etiketlere.
::first-letterögesine de uygulanabilir. - Kalıtsallık :
- Yok.
- Tarayıcı Desteği :
- Tarayıcı desteği tablosuna bakın
- Animasyon :
- Desteklenmiyor
animationÖzelliği - Javascript :
öge.style.borderImage = "red";- Sürüm :
- CSS Backgrounds and Borders Module Level 3
- Açıklama :
border-image Özelliği Kullanımı
Markanız için 300X300 alan.
CSS border-image özelliği; border-style özelliği yerine çerçevede görsel kullanabilmenize olanak tanır.
border-image özelliğindeki çerçeve görselinin yüklenememesi olasılığına karşı her zaman border-style özelliğini tanımlamalısınız. Bu, her ne kadar bunu tarayıcılar gerçekleştirmese de yönergelere göre zorunludur.
border-image Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 3.5 -moz- [5]15 [1] [2] [3] [4] 44 -webkit- [6] |
10.5 11 -o- |
3 -webkit-6 |
7 -webkit-16 |
11 |
<border-image-slice> (isteğe bağlı) |
15 | ? | ? | ? | ? |
fill |
15 | ? | 6 | Var | ? |
<gradient> |
29 | Var | Var | Var | Var |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 4 -moz- [5]15 [1] [2] [3] [4] 44 -webkit- [6] |
11 -o- |
3.2 -webkit-6 |
2.1 -webkit- |
Var |
<border-image-slice> (isteğe bağlı) |
15 | ? | ? | ? | ? |
fill |
15 | ? | 6 | 18 | ? |
<gradient> |
29 | Var | Var | Var | ? |
[1] Küçük SVG'ler yanlış biçimde esniyor çünkü border-image-slice özelliğindeki yüzdeler float yerine tam sayı türünden.
[2] Firefox 47'e kadar, görüş açısı olmayan SVG'ler doğru kırpılmıyor.
[3] Firefox 48'den 49'a kadar görüş açısı olmayan SVG'ler görüş açılı gibi gösterildi, ancak kırpılma tam %50 değilse doğru olmayan bir biçimde esnetildiler.
[4] Firefox 57'ye kadar e10 kapalıyken görüş açısı olmayan SVG'lerde kalıcı bir sorun vardı.
[5] Firefox 15'ten önce, ön ekli olarak, bu özelliğin eski bir türü kullanıldı.
[6] 44'üncü sürümden beri about:config'te layout.css.prefixes.webkit ayarı true olarak yapılandırılmış olmalı.
İlişkili Özellikler
borderÖzelliği- Çerçeveyi belirler.
border-bottom-styleÖzelliği- Alt çerçeve deseni belirler.