HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
CSS Kenarlık Resimleri
CSS border-imageözelliğiyle, bir öğenin çevresinde kenarlık olarak kullanılacak bir görüntü ayarlayabilirsiniz.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
CSS border-image Özellik
CSS border-imageözelliği, bir öğenin etrafındaki normal kenarlık yerine kullanılacak bir görüntü belirlemenize olanak tanır.Mülkiyet üç bölümden oluşur:
- Kenarlık olarak kullanılacak resim
- Resmin nerede dilimleneceği
- Orta bölümlerin tekrarlanması mı yoksa uzatılması mı gerektiğini tanımlayın
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
border-imageMülkiyet görüntüsünü alır ve tic-tac-toe panosunun gibi, dokuz bölüme bunu dilimler. Daha sonra köşeleri köşelere yerleştirir ve orta kısımlar sizin belirlediğiniz şekilde tekrarlanır veya uzatılır.
Burada, kenarlığı oluşturmak için görüntünün orta bölümleri tekrarlanır:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
İşte kod:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>Burada, kenarlığı oluşturmak için görüntünün orta bölümleri gerilir:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>CSS border-image - Farklı Dilim Değerleri
Farklı dilim değerleri, kenarlığın görünümünü tamamen değiştirir:Örnek 1:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Örnek 2:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Örnek 3:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
KODU:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
Konu Sahibi
Konu Sahibi
Paylaşım için teşekkürler
Rica Ederim..Yorumlarınız için Teşekkürler..Paylaşım için teşekkürler
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
