Border Radius Generator
Generate border radius
Generate border radius Tarayıcınızda yerel olarak çalışır
border-radius: 12px;
About the
Kenarlık Yarıçapı Oluşturucu, bir kutunun dört köşesini canlı önizlemeyle bağımsız olarak ayarlar ve size CSS'yi verir. Kısaltmanın sırası herkesin unuttuğu şeydir: Sol üst, sağ üst, sağ alt, sol alt, sol üstten saat yönünde ilerlemek. Bir değer dört köşenin tamamına, iki değer köşegen çiftlerine uygulanır ve dört değer sırasıyla her köşeye uygulanır. Dördü de eşleştiğinde araç, aslında çoğu zaman istediğiniz tek değerli formu yayar.
Where people use the
- Piksel değerlerini tahmin etmeden bir yarıçapı bir tasarım spesifikasyonuyla eşleştirme.
- Bir kartın veya modelin yalnızca üst köşelerini yuvarlama.
- Eleman yüksekliğinin yarısı kadar yarıçapa sahip bir hap düğmesinin şekillendirilmesi.
- Kare bir avatarı daireye dönüştüren yarıçapı bulmak.
How to use the
- 1
Bir köşe kaydırıcısını sürükleyin
Her köşenin 0 ila 150 piksel arasında kendi kaydırıcısı vardır. Önizleme kutusu siz hareket ettikçe yuvarlanır.
- 2
Köşeleri bağlantılı tutun veya bağlantılarını kaldırın
Bağlantı açıkken herhangi bir kaydırıcıyı hareket ettirmek dördünü de birlikte hareket ettirir. Bireysel köşeleri şekillendirmek için onu kapatın; bu şekilde konuşma balonu kuyruğu veya yaprak şekli oluşturabilirsiniz.
- 3
CSS'yi okuyun
Eğer dördü de eşleşirse, tek değerli kısaltmayı elde edersiniz. Farklıysa dört değerli formun tamamını saat yönünde alırsınız.
- 4
Bunun yerine yüzdeyi düşünün
Kare bir öğenin yüzde 50'lik yarıçapı bir daire verir. İhtiyacınız olan buysa, stil sayfanızdaki piksel birimini bir yüzdeyle değiştirin.
İpuçları ve en iyi uygulamalar
- Öğe yeniden boyutlandırıldığında yüzdeleri, yeniden boyutlandırılmadığında pikselleri kullanın.
- Hap düğmesi sabit bir yarıçap değildir; yüksekliğin yarısı kadar olduğundan 9999px tembel ama sağlam bir cevaptır.
- Yarıçapı bir bileşen kümesi boyunca tutarlı tutun; 4px, 6px ve 8px'in karıştırılması tesadüfi görünüyor.
Sık sorulan sorular
Dört değer hangi sıradadır?
Sol üstten saat yönünde: sol üst, sağ üst, sağ alt, sol alt. Yararlı bir anımsatıcı, okumaya başladığınız yerden başlaması ve saat kadranı gibi dönmesidir.
İki veya üç değer ne anlama geliyor?
Köşegenleri iki değer belirler: birincisi sol üst ve sağ alt, ikincisi sağ üst ve sol alt. Üç değer sol üst, ardından sağ üst ve sol alt birlikte, ardından sağ alt olarak ayarlanır.
Nasıl daire yapabilirim?
Zaten kare olan bir öğede yüzde 50 kullanın. Piksellerin kullanılması yalnızca yarıçapın genişliğin yarısına eşit olması durumunda bir daire verir, bu da öğenin yeniden boyutlandırıldığı anı keser.
Köşeleri yatay ve dikey olarak farklı şekillerde yuvarlayabilir miyim?
Tam sözdizimi, yatay değerler, eğik çizgi ve ardından dikey değerler olarak yazılan eliptik bir yarıçapa izin verir. Bu araç daha basit tekdüze bir form sunar; bu nedenle, bu şekle ihtiyacınız varsa eğik çizgi sürümünü elle ekleyin.
Yuvarlak köşem neden kırpılmış?
Çünkü alt içerik yuvarlak kutuya kırpılmamıştır. Öğeye gizli taşma ekleyin, aksi takdirde içindeki resim veya arka plan hala kare köşeler göstermeye devam edecektir.