Köşe yarıçapı
border-radius ile köşeleri yuvarlatmayı öğrenirsin.
border-radius nedir?
border-radius bir kutunun köşelerini yuvarlatır. Değer bir yarıçaptır; ne kadar büyükse köşe o kadar yumuşak yuvarlanır. border-radius: 8px tipik bir kart için uygun, hafif yuvarlak bir görünüm verir.
Yarıçap, kutu kareyse çeyrek daire, dikdörtgense çeyrek elips çizer. Kenarlık yoksa yine de arka plan köşeleri yuvarlanır; yuvarlama kutunun tüm katmanlarını etkiler.
Dört köşe ayrı ayrı
border-radius tek değer aldığında dört köşeye aynı yarıçapı uygular. İki değer verirsen birinci üst-sol ve alt-sağ, ikinci üst-sağ ve alt-sol köşelere uygulanır.
Dört değer sırayla üst-sol, üst-sağ, alt-sağ, alt-sol köşeleridir. Ayrıca border-top-left-radius gibi tek köşe özellikleri de vardır; yalnızca bir köşeyi yuvarlamak istendiğinde işe yarar.
Uygulama Yuvarlak avatar yap
.avatar seçicisi için bir bildirim bloğu yaz. İçine border-radius: 50% bildirimini ekle. Yüzde değeri, kare bir görseli tam daireye çevirir.
Örnek çözümü göster
/* yuvarlak avatar */
.avatar {
border-radius: 50%;
}Kendini test et
-
border-radius: 8px; ne yapar?
- Kenarlık kalınlığını 8 piksel yapar
- Kenarlık rengini değiştirir
- İç boşluğu 8 piksel artırır
- Köşeleri 8 piksel yarıçapla yuvarlatır
Cevabı göster
Köşeleri 8 piksel yarıçapla yuvarlatır — Doğru. 8px köşelerin yarıçapıdır; ne kadar büyükse köşe o kadar yuvarlak olur.
-
Köşe yarıçapı özelliğini yaz
.box { ____: 12px; }Cevabı göster
.box { border-radius: 12px; } -
Yarıçap değerini görünüme eşle
- 0
- Köşe sivri
- 8px
- Hafif yuvarlak
- 50%
- Tam daire