CSS border-image Özelliği

CSS border-image

Css border-image özelliğini kullanarak html elemanlarının kenarlarına resim atayarak daha güzel tasarım ve sonuçlar elde edilebilir.

Örnek:

Bu örnekte border-image özelliğini 4 tane paragraf elemanına uygulanacaktır.

#kenarresim1 { border: 10px solid transparent; padding: 13px; -webkit-border-image: url(border.png) 28 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 28 round; /* Opera 11-12.1 */ border-image: url(border.png) 28 round; }

CSS border-image nedir nasıl kullanılır

CSS border-image CSS border-image özellikleri  
Varsayılan Değer: none 100% 1 0 stretch  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript border-image: object.style.borderImage="url(border.png) 28 round"

CSS border-image Tarayıcı Desteği

CSS Kodu:
border-image 16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-

CSS border-image Değerleri

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

CSS border-image özelliği değerleri

CSS border-image değerleri CSS border-image değerleri tanımları CSS örnek uygulamalar
border-image-source Kenarlık olarak kullanılacak resmin adresi girilir.  
border-image-slice kenarlık olarak kullanılan resmin dilim sayısıdır.
border-image-width Kenarlık olarak kullanılcak resmin genişliğidir.  
border-image-outset Kenarlık resminin uygulanacak elemandan ne kadar dışarısında kalacağını gösteren değerdir.  
border-image-repeat Resmin rekrar edip etmeyeceği belirtilir.
initial Özelliğin başlangıç değeridir.  
inherit Soy bağından gelen değeridir.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

HTML Resimler

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Javascript ile neler yapılabilir

HTML blockquote Etiketi Örnek

YouTube Reklam Engelleyici

Linklerin Renklerini Değiştirme Örnek