CSS3 border-image-width Örnek

Kasım 29, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>border-image-width özelliği ve örnek uygulama</title> <style> #border1 { border: 12px solid transparent; padding: 25px; margin-top:30px; border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 15px; } #border2 { border: 12px solid transparent; padding: 25px; margin-top:30px; border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 20px; } #border3 { border: 12px solid transparent; padding: 25px; margin-top:30px; border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 28px; } </style> </head> <body> <div>Border-image-width özelliğini ; kenarları resimle kaplanan elementin kenar kalınlığını belirlemek için kullanırız.</div> <div id="border1">border-image-width: 15px;</div> <div id="border2">border-image-width: 20px;</div> <div id="border3">border-image-width: 28px;</div> <p>Border için kullandığımız resim aşağıdadır.</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png" alt="borderimage" title="border-image"> <br /> <br /> <div><b>Hatırlatma:</b> Internet Explorer 10 ve öncesindeki versiyonları <b>border-image-repeat</b> özelliğini desteklemiyor..</div> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>border-image-width özelliği ve örnek uygulama</title>
  <style>
    #border1 { 
        border: 12px solid transparent;
        padding: 25px;
     margin-top:30px;
        border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png);
        border-image-repeat: round;
        border-image-slice: 28;
        border-image-width: 15px;        
    }
    
    #border2 { 
        border: 12px solid transparent;
        padding: 25px;
     margin-top:30px;
        border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png);
        border-image-repeat: round;
        border-image-slice: 28;
        border-image-width: 20px;        
    }
    
    #border3 { 
        border: 12px solid transparent;
        padding: 25px;
     margin-top:30px;
        border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png);
        border-image-repeat: round;    
        border-image-slice: 28;
        border-image-width: 28px;        
    }
  </style>
</head>

<body>
  <div>Border-image-width özelliğini ; kenarları resimle kaplanan elementin kenar kalınlığını belirlemek için kullanırız.</div>
  <div id="border1">border-image-width: 15px;</div>
  <div id="border2">border-image-width: 20px;</div>
  <div id="border3">border-image-width: 28px;</div>

<p>Border için kullandığımız resim aşağıdadır.</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAl1VhNfB0cRTjMkhnneM0RedCax_dgDFGfitqBhonm8jvkRGGtT-xIj3xJQcH5JHtlMsWrbC7F41vgj6AHSQZjPDQBe38uZEEpckD7nAkLh8NYlVz2NMkq2RsCsKxPvyWS3NjS3Q3Zw/s1600/border.png" alt="borderimage" title="border-image">
  <br />
  <br />
  <div><b>Hatırlatma:</b> Internet Explorer 10 ve öncesindeki versiyonları <b>border-image-repeat</b> özelliğini desteklemiyor..</div>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS3 border-image-width Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum Etiketi Örnek

HTML DOCTYPE Bildirimi

HTML Yorumlar

Javascript ile neler yapılabilir

HTML link Etiketi

Web Sitenizden Çok Para Kazanin

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

javascript yazım kuralları

YouTube Reklam Engelleyici

Html belgesi yapısını anlama uygulaması