Kayıtlar

border-image-slice etiketine sahip yayınlar gösteriliyor

CSS border-image-slice Özelliği

CSS border-image-slice Css border-image-slice özelliği ile kenar resmi olacak resmin kaç dilime ayrılacağını belirlenebilir. Örnek: Bu örnek alıştırmada kenarlığa eklenecek resmin dilim sayısı değeri üzerinde oynayarak farklı kenarlık tipleri oluşturmayı deneyeceğiz. #kenarresim1 { border: 13px solid transparent; padding: 14px; -webkit-border-image: url('border.png') round; /* Safari 3.1-5 */ -o-border-image: url('border.png') round; /* Opera 11-12.1 */ border-image: url('border.png') round; border-image-slice: 50; } Kendiniz deneyin » CSS border-image-slice nedir nasıl kullanılır Css border-image-slice özelliği kenarlık için kullanılacak resmin dilim sayısını belirtmek için kullanılır. CSS border-image-slice CSS border-image-slice özellikleri &nbsp Varsayılan Değer: 100%   Kalıtsallık: yok   Animasyon Özelliği:

CSS3 border-image-slice uygulama

CSS3 border-image-slice #borderimage {<br>    border: 20px solid transparent;<br>    padding: 20px;    <br>    border-image: url(border.png);<br>    border-image-slice:<span id='rfrnscsscde'> 10</span>;<br>    border-image-repeat: round;<br>    }<br> CSS3 border-image-slice değerleri 28 60 15 25 Sonuç Ekranı Note: Internet Explorer 10, and earlier versions, do not support the border-image-slice property. Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com

JavaScript CSS3 border-image-slice Örnek

javascript css3 border-image-slice örnek uygulama Javascript ile border-image-slice özelliğine "25%" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.borderImageSlice = "25%"; } Çalıştır JavaScript css border-image-slice © htmlvecssegitimi.blogspot.com

CSS3 border-image-slice Örnek

Resim
htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>css border-image-slice özelliği ve örnek uygulama</title> <style> #kenarresim1 { border: 13px solid transparent; padding: 14px; -webkit-border-image: url('http://4.bp.blogspot.com/-rop7iCE42CM/VjDFWluBPFI/AAAAAAAAA24/gYUHDYh6r-Q/s1600/border.png') round; /* Safari 3.1-5 */ -o-border-image: url('http://4.bp.blogspot.com/-rop7iCE42CM/VjDFWluBPFI/AAAAAAAAA24/gYUHDYh6r-Q/s1600/border.png') round; /* Opera 11-12.1 */ border-image: url(&#