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 Yuvarlak Köşeler
CSS border-radiusözelliği ile herhangi bir öğeye "köşeleri yuvarlatılmış" verebilirsiniz.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
CSS border-radius Özellik
CSS border-radiusözelliği, bir elemanın köşelerinin yarıçapını tanımlar.İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar!
İşte üç örnek:
1. Belirtilen arka plan rengine sahip bir öğe için yuvarlatılmış köşeler:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
2. Kenarlıklı bir öğe için yuvarlatılmış köşeler:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
3. Arka plan görüntüsüne sahip bir öğe için yuvarlatılmış köşeler:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
--------------------------------------------------------------------------------------------------------------------------------------------------
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>--------------------------------------------------------------------------------------------------------------------------------------------
CSS border-radius - Her Köşeyi Belirt
border-radiusMülkiyet birinden dört değerlere sahip olabilir. İşte kurallar:Dört değer - sınır yarıçapı: 15px 50px 30px 5px; (birinci değer sol üst köşeye, ikinci değer sağ üst köşeye, üçüncü değer sağ alt köşeye ve dördüncü değer sol alt köşeye uygulanır):
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Üç değer - sınır yarıçapı: 15px 50px 30px; (birinci değer sol üst köşeye, ikinci değer sağ üst ve sol alt köşelere ve üçüncü değer sağ alt köşeye uygulanır):
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
İki değer - border-radius: 15px 50px; (ilk değer sol üst ve sağ alt köşeler için geçerlidir ve ikinci değer sağ üst ve sol alt köşeler için geçerlidir):
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Bir değer - sınır yarıçapı: 15 piksel; (değer, eşit olarak yuvarlatılmış dört köşenin tümü için geçerlidir:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
İşte Kod:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>----------------------------------------------------------------------------------------------------------------------------------------------
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>
Son düzenleme:
Konu Sahibi
Konu Sahibi
Rica Ederim..Yorum İçin Teşekkürler..Paylaşım için teşekkürler, ellerine sağlık
