Border-radius Generátor
Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
Mit jelent a border-radius 8 értékes szintaxisa?
A border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 szintaxisban a perjel előtti értékek a vízszintes sugarak (bal felső, jobb felső, jobb alsó, bal alsó), az utána lévők pedig a függőleges sugarak. A különböző értékek mindkét irányban hozzák létre az organikus blob alakokat.
Hogyan használom a generált CSS-t?
Másolja ki a border-radius sort, és illessze be annak az elemnek bármely CSS szabályába, amelyet formálni szeretne, például .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Működik tiszta CSS-ben, Sass-ban, Tailwind arbitrary value-ban és inline stílusban is.
Hol használnak blob alakokat?
A blob alakokat gyakran használják hero illusztrációkhoz, avatarokhoz, profilképekhez, funkciókártyákhoz, gombokhoz és dekoratív hátterekhez a modern web- és alkalmazástervezésben.
A lekerekített sarkok minden böngészőben működnek?
Igen. A border-radius-t minden modern böngésző támogatja, beleértve a Chrome-ot, Firefoxot, Safarit, Edget és a mobilböngészőket, gyártói előtag nélkül.
Animálhatom a blob alakot?
Igen. A border-radius animálható tulajdonság, így egy CSS átmenettel folyékonyan morfolhat a formák között, például .blob { transition: border-radius .8s ease; }.
Mi a különbség a 4 értékes és a 8 értékes szintaxis között?
A 4 értékes forma minden sarknak ugyanazt a vízszintes és függőleges sugarat adja, ami pirula- és körformákhoz elég. A 8 értékes forma külön kezeli a vízszintes és függőleges sugarakat, ami aszimmetrikus, organikus alakokat tesz lehetővé.
Hogyan készítsek tökéletes kört?
Állítson mind a nyolc értéket 50%-ra egy négyzet alakú elemnél, vagy egyszerűen használja a border-radius: 50% beállítást. Kiindulhat egy körhöz közeli előbeállításból is, és finomíthatja.
Feltöltésre kerülnek az adataim?
Nem. A generátor teljes egészében a böngészőjében fut tiszta CSS-sel és JavaScripttel. Semmi abból, amit húz, begépel vagy másol, nem kerül szerverre.
Használható nem négyzet alakú elemeken?
Igen, de a százalékos sugarak az elem méretéhez viszonyulnak, így egy téglalap ellipszis alakú sarkokat kap, és másképp néz ki, mint a négyzetes előnézet. A generált értékeket kiindulópontként használja, és igazítsa őket.
A(z) Border-radius Generátor használata
A nyolc értékes border-radius olyan organikus blob alakokat készít ellipszis alakú sarkokkal, amilyet egy egyszerű lekerekített téglalap sosem ér el. Formázza az alakot a fogantyúkkal, és másolja ki a kész CSS-t — minden élőben renderelődik a böngészőjében.
- Fogja meg a nyolc, az alak élein elhelyezett fogantyú bármelyikét — a felső és alsó él fogantyúi a vízszintes sugarakat, az oldalsók a függőlegeseket állítják.
- Kattintson a hat előre beállított alak egyik négyzetére, hogy egy megtervezett blobból induljon, majd finomítsa az értékeket a Vízszintes sugarak és Függőleges sugarak számmezőiben (sarkonként egy, 0–100%).
- Nyomja meg a Véletlen gombot, hogy egy kattintással új organikus alakot kapjon, vagy a Visszaállítás gombot az alapértelmezett alak és színekhez.
- Válasszon Alak színét és Háttérszínt, hogy a blobot a célpalettán lássa — mindkettő azonnal frissül.
- Nyomja meg a CSS másolása gombot az alul élőben megjelenő border-radius deklaráció kiemeléséhez, majd illessze be bármelyik elemre.
Alkalmazza a kódot egy négyzet alakú elemen overflow: hidden mellett a klasszikus blob megjelenésért; a százalékos értékek minden méretben folyékonyan tartják a görbét, a szintaxisban lévő perjel pedig elválasztja a vízszintes sugarakat a függőlegesektől.
Kapcsolódó eszközök
- CSS Border Radius Generátor Vizuális CSS border-radius generátor. Állítsa be minden sarkát függetlenül valós idejű előnézettel és másolja ki a CSS kódot azonnal.
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- CSS Box Shadow Generátor Ingyenes online CSS box-shadow generátor. Vizuálisan hozzon létre gyönyörű árnyékokat állítható eltolással, elhomályosítással, kiterjedéssel, színnel és betéttel. Élő előnézet és azonnali kód másolás.
- Színpaletta generátor Hozzon létre gyönyörű, harmonikus színpalettákat azonnal ingyenes online generátorunkkal. Támogatja a monokromatikus, analóg, komplementer, triadikus, osztott-komplementer és tetradikus módokat. Állítsa be a színeket HSL csúszkákkal, zárolja a kedvenceket, és exportáljon CSS, Tailwind, JSON vagy SVG formátumban. 100% böngészőalapú, adatai soha nem hagyják el az eszközét.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.
- CSS clip-path generátor Ingyenes online CSS clip-path generátor. Tervezzen polygon, circle, ellipse és inset alakzatokat húzható pontokkal, élő előnézettel és egy kattintásos CSS-kód másolással.