Lekerekített sarok- és alakzatgenerátor
Állítsa be a négy sarok vízszintes és függőleges sugarát px vagy % értékben, és tekintse meg az alakzatot. Másolja vagy mentse az előállított border-radius CSS-t. Az előnézet szélessége, magassága és színe nem szerepel a CSS-ben.
Mire használható
Lekerekítés beállítása előbeállításból
Válasszon 8 előbeállítás közül, köztük lekerekített sarkokat, kapszulát és levelet, és állítsa be a lekerekítéseket. Az előbeállítás kiválasztása felülírja a lekerekítéseket és a mértékegységet.
Adjon mind a négy saroknak eltérő lekerekítést
Kapcsolja ki az azonos lekerekítés beállítást, hogy külön adja meg a bal felső, a jobb felső, a jobb alsó és a bal alsó sarok vízszintes és függőleges lekerekítését.
A CSS ellenőrzése és lekérése
Ellenőrizze az alakot, majd generálja a CSS-t. Váltson a rövidített és az egyedi sarokdeklarációk között, majd másolja a CSS-t, vagy mentse CSS-fájlként.
Hogyan használható
Előbeállítás és mértékegység kiválasztása
Adja meg közvetlenül a lekerekítéseket, vagy válasszon előbeállítást a beállítás megkezdéséhez. A mértékegység váltása nem alakítja át a számokat.
A lekerekítés és az alak összehasonlítása
Adjon meg egy értéket az azonos lekerekítés használatához. Sarokonkénti változtatáshoz kapcsolja ki az lehetőséget, és állítsa be a vízszintes és függőleges értékeket.
A méret ellenőrzése, ha szükséges
Az előnézeti beállításokban módosíthatja a szélességet, a magasságot és az előnézet színét. Ezek nem szerepelnek a kimeneti CSS-ben.
A CSS generálása, majd másolása vagy mentése
Nyomja meg a „CSS generálása” gombot, és válassza ki a kívánt formátumot. Ha módosítja a lekerekítéseket, a mértékegységet vagy a méretet, generálja újra.
Mikor hasznos
Kártyák és gombok sarkainak alakítása
Amikor CSS-t szeretne készíteni oldalkomponensekhez, lekerekítve mind a négy sarkot egyformán, vagy csak a felső sarkokat lekerekítve.
Aszimmetrikus lekerekített háttér létrehozása
Amikor sarokonkénti vízszintes és függőleges lekerekítéssel levélhez vagy organikus alakhoz hasonló kontúrokat szeretne létrehozni.
A lekerekítések, a mértékegységek és a megjelenítési méret kapcsolata
A vízszintes és a függőleges ugyanannak a saroknak a két iránya
A vízszintes lekerekítés a vízszintes, a függőleges lekerekítés a függőleges lekerekítést szabályozza. Ha bármelyik érték 0, a sarok nem lekerekített. A négy sarkot a bal felső saroktól haladva az óramutató járása szerint adja meg.
A % külön alapértéket használ a szélességhez és a magassághoz
A vízszintes % értékek az elem szélességére, a függőleges % értékek a magasságára vonatkoznak. Ugyanazokkal a számokkal egy négyzet és egy magas vagy széles téglalap eltérően néz ki. A px közvetlenül hosszúságot ad meg.
A túlméretes lekerekítések azonos arányban zsugorodnak
Ha a szomszédos lekerekítések összege meghaladja az oldalhosszt, mind a 8 megjelenített lekerekítést ugyanazzal a tényezővel csökkenti a rendszer. A megadott értékek és a generált CSS változatlan marad. A generálás utáni részletekben ellenőrizheti az előnézethez használt lekerekítéseket.
Amit a lekerekített sarkok ki tudnak fejezni
A border-radius ellipszis alakú görbevé alakítja a sarkokat. Nem hozhat létre benyúlásokat vagy tetszőleges sokszögeket. A squircle előbeállítás ellipszis sarkokkal közelíti a alakot; nem reprodukálja pontosan a matematikai görbét.
Gyakori kérdések
Beállíthatok minden sarokhoz eltérő lekerekítést?
Igen. A „Ugyanaz a lekerekítés minden saroknál” lehetőség kikapcsolásával külön adhatja meg minden sarok vízszintes és függőleges lekerekítését. A bejelölése ismételt bekapcsolása minden lekerekítést a bal felső vízszintes lekerekítésre állítja.
Átváltják-e a számokat, ha mértékegységet váltok?
Nem. A számok megmaradnak, és csak a mértékegység változik. Ha a px-ről %-ra váltás után egy 100 feletti érték megmarad, adja meg újra a 0–100 tartományon belül.
Az előnézet mérete és színe szerepel a CSS-ben?
Nem. A kimenet csak a border-radius deklarációkat tartalmazza. Állítsa be a szélességet, a magasságot és a háttérszínt azon az oldalon vagy komponensen, ahol használja.
Miért kisebb a megjelenített alak lekerekített sarka, mint a megadott lekerekítések?
A böngésző azonos arányban csökkenti a megjelenített lekerekítéseket, hogy a sarokgörbületek ne lógjanak össze. A csökkentési tényezőt és az egyes sarkok px értékeit a „Megjelenítéshez használt lekerekítések” pont alatt ellenőrizheti.
Bemenet és eredmények
- Lekerekítések
- Adja meg mind a 8 értéket ugyanabban a mértékegységben: 0–100% vagy 0–9999px. Tizedes értékek is elfogadottak.
- Előnézet
- Az előnézet szélessége és magassága 1–400px közötti egész szám. A be nem férő szélességet a mezőn belül vízszintesen görgetheti.
- Kimenet
- border-radius rövidítés vagy az egyes 4 sarok deklarációi. Másolja vagy mentse border-radius.css formátumban.
- Nem szerepel a kimenetben
- Szélesség, magasság, háttérszín, valamint kép- vagy SVG-export.