- Katılım
- 21 Nis 2021
- Konular
- 1,033
- Mesajlar
- 4,724
- Çözüm
- 15
- Online süresi
- 3mo 27d
- Reaksiyon Skoru
- 1,970
- Altın Konu
- 343
- TM Yaşı
- 5 Yıl 1 Ay 16 Gün
- Başarım Puanı
- 287
- Yaş
- 51
- MmoLira
- 3,408
- DevLira
- 12
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ 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
- Katılım
- 21 Nis 2021
- Konular
- 1,033
- Mesajlar
- 4,724
- Çözüm
- 15
- Online süresi
- 3mo 27d
- Reaksiyon Skoru
- 1,970
- Altın Konu
- 343
- TM Yaşı
- 5 Yıl 1 Ay 16 Gün
- Başarım Puanı
- 287
- Yaş
- 51
- MmoLira
- 3,408
- DevLira
- 12
günceldir..
- Katılım
- 20 Nis 2019
- Konular
- 5,130
- Mesajlar
- 19,082
- Çözüm
- 627
- Online süresi
- 12mo 4d
- Reaksiyon Skoru
- 14,958
- Altın Konu
- 486
- TM Yaşı
- 7 Yıl 1 Ay 17 Gün
- Başarım Puanı
- 494
- MmoLira
- 31,448
- DevLira
- 51
Paylaşım için teşekkürler, ellerine sağlık 
