Önemli noktalar
- 01Üç mod — tek tip, köşe başına ve eliptik — basit yuvarlatılmış düğmelerden organik blob şekillerine kadar her şeyi kapsar.
- 02px, % ve rem birimlerini destekler, her biri farklı ölçeklendirme davranışına sahiptir.
- 03Eliptik mod, CSS'nin tam border-radius sözdizimi için köşe başına yatay ve dikey yarıçapları gösterir.
- 04Canlı önizleme gerçek CSS özelliğini kullanır, bu nedenle gördüğünüz tam olarak tarayıcının render edeceği şeydir.
Basit Yuvarlatılmış Köşelerden Organik Blob Şekillerine
Dört köşeli bir border-radius değeri hafızadan yazması kolaydır — border-radius: 8px. Ancak köşe başına farklı yarıçaplara ihtiyacınız olduğunda veya organik şekiller için CSS eliptik sözdizimini istediğinizde, kısaltma hızla şifreli hale gelir. Tam form top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — belirli bir sırada sekiz değer.
Handytool'un border-radius üreteci, her köşe için kaydırıcıları herhangi bir modda sürüklemenize ve şekli canlı olarak güncellemenize izin verir. px, % ve rem arasında yeniden hesaplamadan geçin ve işiniz bittiğinde doğru kısaltmayı veya uzun form CSS bildirisini kopyalayın.
Border Radius Tasarlamak Nasıl Yapılır
- 01
Bir mod seç
Tek tip mod dört köşeye bir yarıçap uygular. Köşe başına mod her köşeyi bağımsız olarak kontrol eder. Eliptik mod köşe başına ayrı yatay ve dikey yarıçap ekler.
- 02
Bir birim seç
Mutlak boyutlar için px, öğenin boyutlarına göre ölçeklenen değerler için % veya kök yazı tipi boyutuna bağlı boyutlar için rem seçin.
- 03
Kaydırıcıları sürükle
Yarıçap değerlerini ayarlayın ve önizleme öğesini canlı olarak güncellemenizi izleyin. Köşe başına mod için her köşenin kaydırıcısını bağımsız olarak sürükleyin.
- 04
Şekli önizle
Önizleme kutusu gerçek CSS border-radius özelliğini uygular, bu nedenle gördüğünüz şekil tarayıcınızın render edeceği şekiltir.
- 05
CSS'yi kopyala
Border-radius bildirisini almak ve stil sayfanıza yapıştırmak için Kopyala'ya tıklayın.
Yaygın Şekiller ve Her Modu Ne Zaman Kullanılır
- 01Hap düğmesi: tek tip % modu, %50 olarak ayarla — düğme genişliğinden bağımsız olarak her zaman tam hap
- 02İnce yuvarlak kenarları olan kart: tek tip px modu, 8–16px — en yaygın UI modeli
- 03Asimetrik etiket veya etiketi: köşe başına mod, bir tarafta keskin, diğer tarafta yuvarlatılmış
- 04Avatar çemberi: tek tip % modu, %50 — görüntü konteynerine göre ölçeklenir
- 05Organik blob şekli: köşe başına farklı X/Y değerleriyle eliptik mod
Anında Önizleme, Hiçbir Şey Yüklenmiyor
Border-radius üreteci tamamen istemci tarafındadır. Kaydırıcılar, mod anahtarları ve birim değişiklikleri tümü önizlemeyi sunucu gidiş-dönüşü olmadan anında günceller. Hesap yok ve oran sınırı yok.
Araç tüm modern tarayıcılarda çalışır. Border-radius özelliği — eliptik X/Y sözdizimi dahil — Safari, Firefox, Edge ve Chrome'un her evergreen sürümünde desteklenir, bu nedenle çıktı satıcı önekleri veya yedekler olmadan kullanımı güvenlidir.
Border-Radius Üreteci SSS
Border-radius için px ve % arasındaki fark nedir?
Piksel yarıçapları mutlaktır — 16px her zaman 16px'tir. Yüzde yarıçapları öğenin boyutlarına göre nispidir, bu nedenle %50 kare kutuda mükemmel bir daire oluşturur ve dikdörtgende bir elips.
Eliptik modu ne zaman kullanmalıyım?
Bir köşenin bir eksen üzerinde daha fazla çıkıntı yaptığı zaman eliptik modu kullanın — yatay bir hap, yaprak şekli veya organik blob için. CSS bunu border-radius kısaltmasında X-yarıçapları / Y-yarıçapları olarak ifade eder.
Kare olmayan kutuda yüzde yarıçapım neden yanlış görünüyor?
Yatay yüzdeler öğenin genişliğine göre; dikey yüzdeler yüksekliğine göre. Geniş, kısa bir öğede köşeler dairesel yaylar yerine elipslere uzanır.
Çıktı her tarayıcıda çalışır mı?
Evet — border-radius eliptik sözdizimi dahil tüm modern tarayıcılarda desteklenir: Safari, Firefox, Edge ve Chrome'un tüm evergreen sürümleri. Satıcı önekleri gerekli değildir.
Border-radius ile mükemmel bir daire nasıl oluştururum?
Kare öğede yüzde modunda tüm köşeleri %50 olarak ayarlayın. Öğenin aynı genişliği ve yüksekliği olması gerekir — boyut dinamikse aspect-ratio: 1 / 1 kullanın.