CSS Border-Radius Oluşturucu

CSS Border-Radius Oluşturucu nedir?

CSS Border-Radius Oluşturucu, ön uç geliştiriciler ve tasarımcılar için yapılmış, CSS border-radius özelliğine yönelik ücretsiz bir görsel düzenleyicidir. Her köşenin yatay ve dikey yarıçapını piksel cinsinden ayarlamak için aralık kaydırıcılarını ve sayı girişlerini kullanın, bir birim seçin ve oval köşeler için eğik çizgi söz dizimini elde etmek üzere eliptik modu açın. Canlı bir önizleme kutusu yuvarlatılmış şekli gerçek zamanlı gösterir ve kopyalamanız için kompakt kısaltılmış bildirim oluşturulur. Hızlı başlamak için bölümlü denetimden Yuvarlatılmış, Hap, Daire veya organik bir Blob gibi bir hazır ayar seçin, ardından herhangi bir köşeyi ince ayarlayın. Köşe sırasını ezberlemeden yumuşak kartlar, hap düğmeler, kusursuz daireler, squircle'lar ve damla biçimli dekoratif şekiller tasarlamak için kullanın.

CSS Border-Radius Oluşturucu nasıl kullanılır

1. Başlangıç şeklini yüklemek için bölümlü denetimden bir hazır ayar (Yuvarlatılmış, Hap, Daire veya Blob) seçin.
2. Her köşenin yatay yarıçapını ayarlamak için köşenin aralık kaydırıcısını sürükleyin veya bir sayı yazın.
3. Köşe başına ikinci bir dikey yarıçap göstermek ve eğik çizgi söz dizimiyle oval köşeler üretmek için Eliptik'i açın.
4. Ayarlarda birimi (px veya %) seçin; yüzdeler yarıçapı kutu boyutuyla ölçeklendirir.
5. Canlı önizlemenin güncellenmesini izleyin, ardından oluşturulan kısaltılmış border-radius'u stil sayfanıza kopyalayın.

Örnekler

Dört köşe de 16, eliptik kapalı

border-radius: 16px;

Hap hazır ayarı, tüm köşeler 9999

border-radius: 9999px;

SÜ 40/20, SağÜ 10, SağA 40/20, SA 10, eliptik açık

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Sıkça sorulan sorular

Dört köşe hangi sırada?

Kısaltma, köşeleri sol üstten başlayarak saat yönünde listeler: sol üst, sağ üst, sağ alt, sol alt. Bu araç dört değeri her zaman bu sırayla çıkarır, böylece sonuç açık seçiktir ve sonrasında elle ayarlaması kolaydır.

Eliptik mod ne yapar?

Border-radius, dairesel yerine oval (eliptik) köşeler çizmek için köşe başına bir eğik çizgiyle ayrılmış yatay ve dikey bir yarıçap alabilir. Her köşeye ikinci bir dikey yarıçap ayarlamak için Eliptik'i açın; çıktı bu durumda 'yatay / dikey' eğik çizgi söz dizimini kullanır.

px mi yoksa yüzde mi kullanmalıyım?

Pikseller, kutudan bağımsız sabit bir köşe boyutu verir. Yüzdeler kutunun genişliğine ve yüksekliğine görelidir, bu yüzden her köşede %50 bir kareyi kusursuz bir daireye dönüştürür ve öğe yeniden boyutlandıkça yuvarlama ölçeklenir. Birimi ayarlardan değiştirin.

Kusursuz bir daireyi veya hapı nasıl yaparım?

Bir kareden daire için Daire hazır ayarını (her köşede %50) seçin veya kısa kenarların tam yarım daireler olması için Hap hazır ayarını (çok büyük bir piksel yarıçapı) seçin. Bir hazır ayardan başlayıp ayrı köşeleri ince ayarlayabilirsiniz.

Verilerim herhangi bir yere yükleniyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda JavaScript ile çalışır — yarıçap değerleriniz asla bir sunucuya gönderilmez, bu yüzden gizli şekilde ve sayfa yüklendikten sonra çevrimdışı bile çalışır.