CSS-körgenerátor – 50% határsugár
Tervezze meg a CSS szegélysugárát vizuálisan: négy független sarokcsúszka képpontban vagy százalékban, egy link-all-corners parancsikon az azonnali körökhöz és pirulákhoz, valamint egy organikus blob mód véletlenszerű alakzatokkal.
Eredmény
Ez az oldal megnyitja a szegélysugár generátort úgy, hogy mind a négy sarka össze van kapcsolva, és 50%-ra van állítva. Ez az érték, amely egy dobozt körré alakít, csak CSS használatával. Őszintén: egy négyzet alakú dobozon ez tökéletes kört alkot, de egy téglalap alakú dobozon ugyanez az 50% ehelyett stadionszerű ellipszist hoz létre, mivel minden sarok csak a saját negyedét kerekíti le.
Ez a megkülönböztetés azért fontos, mert az 50%-os szegélysugár az egyetlen leggyakoribb módja kör alakú avatarok, ikonjelvények és állapotpontok létrehozásának CSS-ben – sokkal egyszerűbb, mint egy kört levágni egy maszkkal vagy rajzolni egyet SVG-ben, és bármilyen méretben éles marad, mivel ez egy relatív százalék, nem pedig egy fix pixelsugár.
Állítsa a dobozt rögzített négyzetméretre a saját CSS-jében, hogy rögzítse a tökéletes kört, vagy hagyja szándékosan téglalap alakúra, hogy pirulaszerű formát kapjon – mindkét esetben a sarkok itt maradnak összekapcsolva, így egyetlen csúszka szinkronban tartja mind a négyet, miközben másolja a kapott CSS-t.