CSS3 Yuvarlak Köşeler
CSS3 ile border-radius özelliği, herhangi bir elemanını verebilir "rounded corners" .
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius Mülkiyet
CSS3 ile, herhangi bir elemanını verebilir "rounded corners" kullanarak, border-radius özelliğini.
İşte üç örnek verilmiştir:
Belirli bir arka plan rengi ile bir eleman 1. Yuvarlak köşeler:
Yuvarlatılmış köşeler!
Bir sınır ile bir element 2. Yuvarlak köşeler:
Yuvarlatılmış köşeler!
Arka plan görüntüsü ile bir element 3. Yuvarlak köşeler:
Yuvarlatılmış köşeler!
İşte kod:
Örnek
#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;
} Kendin dene " Tip: border-radius özelliği aslında bir stenografi özelliği olan border-top-left-radius , border-top-right-radius , border-bottom-right-radius ve border-bottom-left-radius özellikleri.
CSS3 border-radius - Her Köşe belirtin
Eğer için tek değer belirtirseniz border-radius özelliği, bu yarıçap Tüm 4 köşelere uygulanacaktır.
İsterseniz Ancak, ayrı ayrı her bir köşeyi belirtebilirsiniz. İşte kurallar:
- Dört değerler: ilk değer, ikinci değer sağ üst uygulanır sol üst uygulanır, üçüncü değer sağ alt uygulanır ve dördüncü değer sol alt köşesine geçerlidir
- Üç değerler: ilk değer, ikinci değer sağ üst ve alt-sol için de geçerlidir sol üst için geçerlidir ve üçüncü değer sağ alt için de geçerlidir
- İki değer: ilk değer sol üst ve sağ alt köşede uygulanır ve ikinci değer sağ üst ve sol alt köşeye için geçerlidir
- Bir değer: Dört köşe eşit yuvarlatılmış
İşte üç örnek verilmiştir:
1. Dört değerler - border-radius: 15px 50px 30px 5px :
2. Üç değerler - border-radius: 15px 50px 30px :
3. İki değer - border-radius: 15px 50px :
İşte kod:
Örnek
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Kendin dene " Ayrıca eliptik köşeleri oluşturabilirsiniz:
Örnek
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Kendin dene " Egzersizleri ile Yourself test edin!
CSS3 Yuvarlak Köşeler Özellikleri
| özellik | Açıklama |
|---|---|
| border-radius | * - - * - yarıçap özelliklerini dört sınır ayarlamak için bir stenografi özelliği |
| border-top-left-radius | sol üst köşesinin sınırında şeklini tanımlar |
| border-top-right-radius | Sağ üst köşede sınırında şeklini tanımlar |
| border-bottom-right-radius | Sağ alt köşede sınırında şeklini tanımlar |
| border-bottom-left-radius | Sol alt köşede sınırında şeklini tanımlar |