CSS border-radius generátor

A border-radius generátor használata

1. Húzd az előnézet szélein lévő pontokat. Minden színes pont egy sarok vízszintes sugarát állítja; ha bejelölöd az Elliptikus sarkok (8 érték) opciót, a fehér pontok a függőleges sugarakat állítják.
2. Vagy írd be a pontos értékeket a Sarkok között: Bal felső, Jobb felső, Jobb alsó és Bal alsó, mindegyikhez egy Vízszintes és egy Függőleges mezővel.
3. Válaszd ki a Mértékegységet: % (a doboz százaléka) vagy px (pixel). Váltáskor a jelenlegi értékek átszámolódnak, így az alakzat ugyanaz marad.
4. Állítsd be a Doboz szélessége (px) és a Doboz magassága (px) értékét az elemed méretéhez, a Minden sarok mezővel pedig egyszerre kerekítheted az összes sarkot.
5. Próbáld ki az Előbeállításokat (Lekerekített, Pirula, Kör, Levél, Csepp, Tojás, Jegy és három folt), vagy kattints a Véletlen folt gombra egy szerves formáért.
6. Jelöld be a Részletes tulajdonságok opciót, ha a négy különálló border-*-radius deklarációt szeretnéd, majd másold ki a CSS-kódot a Másolás gombbal.

Billentyűzet: fókuszálj egy pontra, és a nyílbillentyűkkel egy lépéssel (Shifttel tízzel) változtathatod a sugarát.

A border-radius szintaxisa

A border-radius egy-négy értéket fogad el ebben a sorrendben: bal felső, jobb felső, jobb alsó, bal alsó. A margókhoz hasonlóan a hiányzó értékeket az átellenes sarokból veszi át: a border-radius: 10px 20px a bal felső és a jobb alsó sarkot 10 px-szel, a másik kettőt 20 px-szel kerekíti. Az eszköz mindig a legrövidebb egyenértékű alakot írja ki.

Valójában minden sarok egy ellipszis negyede, két sugárral. A perjel választja el a vízszintes sugarakat a függőlegesektől, így akár nyolc érték is lehet:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

A perjel előtt a négy sarok vízszintes sugarai állnak, utána a függőlegesek. Ha a két lista megegyezik, a perjeles rész elmarad.

Pixel vagy százalék?

• A px ugyanazt az ívet adja az elem méretétől függetlenül. Gombokhoz, kártyákhoz és beviteli mezőkhöz ez a jó választás: border-radius: 8px.
• A % az elemhez viszonyít: a vízszintes sugarak a szélességhez, a függőlegesek a magassághoz. Az 50% a négyzetből kört, a téglalapból ellipszist csinál. A százalékok teszik lehetővé, hogy a foltformák az elemmel együtt skálázódjanak.

Pirula alakú gombhoz használj legalább a magasság felének megfelelő pixelsugarat. A Pirula előbeállítás pontosan ezt teszi a megadott dobozmérettel; egy óriási érték, például a 999px is működik.

Ha két szomszédos sugár összege nagyobb, mint a közös oldal hossza, a böngészők arányosan csökkentik az összes sugarat, amíg beleférnek. Ezért nem rontja el az alakzatot, ha két pontot egymáson túlhúzol.

Foltformák

A folt előbeállítások és a Véletlen folt nyolc százalékértéket használnak, ahol az egyes oldalakon lévő két pont összege 100%. Így az ívek pontosan találkoznak, és az alakzat sima kavicsra emlékeztet. Két folt között a border-radius CSS transition átmenetével „morfolódó” hatást érhetsz el.