Főbb pontok
- 01Három mód — egyenletes, sarokonként és elliptikus — mindent lefed az egyszerű lekerekített gombokról az organikus blob alakokig.
- 02Támogatja a px, % és rem egységeket, mindegyiknek eltérő méretezési viselkedése.
- 03Az elliptikus mód kiteszi az egyes sarkok vízszintes és függőleges sugarait a CSS teljes border-radius szintaxisához.
- 04Az élő előnézet a valós CSS tulajdonságot használja, így pontosan azt látod, amit a böngésződ renderel.
Az egyszerű lekerekített sarkokból az organikus blob alakokig
A négy sarok border-radius értéke elég egyszerű az emlékezetből való beíráshoz — border-radius: 8px. De ha sarokonként eltérő sugarakra van szükséged, vagy az elliptikus szintaxist szeretnéd használni az organikus alakokhoz, a rövidítés gyorsan értelmezhetetlen lesz. A teljes forma: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — nyolc érték egy konkrét sorrendben.
A Handytool border-radius generátora lehetővé teszi az egyes sarkok csúszkáinak húzását bármilyen módban, és az alak valós időben frissül. Váltogass a px, % és rem között újraszámítás nélkül, és másolj ki helyes rövidítéseket vagy hosszú formájú CSS deklarációkat, ha kész vagy.
Hogyan tervezz egy Border Radiust
- 01
Válassz egy módot
Az egyenletes mód egy sugarat alkalmaz mind a négy sarkara. A sarokonként mód egyes sarkokat irányít egymástól függetlenül. Az elliptikus mód egy külön vízszintes és függőleges sugarat ad hozzá sarokonként.
- 02
Válassz egy egységet
Válassz px abszolút méretekhez, % az elem méreteihez viszonyított értékekhez, vagy rem a gyökér betűmérethöz kötött méretekhez.
- 03
Húzd a csúszkákat
Állítsd be a sugár értékeket, és figyeld az előnézeti elem valós idejű frissülését. A sarokonként módban húzd az egyes sarkok csúszkáit egymástól függetlenül.
- 04
Az alakot előnézetben
Az előnézeti doboz az aktuális CSS border-radius tulajdonságot alkalmazza, így az alak, amit látsz, az alak, amit a böngésződ renderel.
- 05
Másold ki a CSS-t
Kattints a Másol gombra, hogy megkapd a border-radius deklarációt, és illeszd be a stíluslapodba.
Gyakori alakok és mikor használjon minden módot
- 01Pasztilla gomb: egyenletes % mód, 50%-ra állítva — mindig egy teljes pasztilla, függetlenül a gomb szélességétől
- 02Kártya finom lekerekítéssel: egyenletes px mód, 8–16px — a leggyakoribb UI minta
- 03Aszimmetrikus címke vagy etikett: sarokonként mód, az egyik oldal éles, a másik lekerekített
- 04Avatar kör: egyenletes % mód, 50% — az kép konténerrel skálázódik
- 05Organikus blob alak: elliptikus mód eltérő X/Y értékekkel sarokonként
Azonnali Előnézet, Semmi Feltöltve
A border-radius generátor teljesen kliens oldali. A csúszkák, módváltások és egység módosítások azonnali előnézet frissülést okoznak szerver kerekút nélkül. Nincs fiók és nincs sebesség limit.
Az eszköz működik az összes modern böngészőben. A border-radius tulajdonság — beleértve az elliptikus X/Y szintaxist — az Safari, Firefox, Edge és Chrome minden evergreen verziójában támogatott, így a kimenet biztonságos szándékpriszprefixek vagy tartalékokhoz nélkül.
Border-Radius Generátor GYIK
Mi a különbség a px és a % között a border-radiusban?
Pixel sugarak abszolútak — 16px mindig 16px. Százalék sugarak az elem méreteihez viszonyítva, így 50% egy négyzetes dobozban egy tökéletes kört, egy téglalapban egy ellipszist hoz létre.
Mikor használjak elliptikus módot?
Használj elliptikus módot, ha egy saroknak az egyik tengelyen jobban kell dagadnia — egy vízszintes pasztillához, egy levél alakhoz vagy egy organikus blobhoz. A CSS ezt X-sugarak / Y-sugarak formában fejezi ki a border-radius rövidítésben.
Miért néz ki rossznak az én százalékos sugárom egy nem-négyzetes dobozban?
A vízszintes százalékok az elem szélességéhez viszonyítva; a függőleges százalékok a magasságához. Egy széles, rövid elemen a sarkok ellipszisekbe nyúlnak ki az egyenes ívek helyett.
Működik a kimenet minden böngészőben?
Igen — a border-radius, beleértve az elliptikus szintaxist, az Safari, Firefox, Edge és Chrome minden modern verziójában támogatott. Nincs szükség szándékpreszívekre.
Hogyan hozhatok létre egy tökéletes kört a border-radiussal?
Állítsd az összes sarok 50%-ra százalék módban egy négyzetes elemben. Az elemnek egyenlő szélességgel és magassággal is kell rendelkeznie — használj aspect-ratio: 1 / 1 ha a méret dinamikus.