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.
Mi a CSS border-radius?
A CSS border-radius egy tulajdonság, amely lekerekíti egy elem külső szélének sarkait. Minden sarkot függetlenül beállíthat egy-négy értékkel.
Hogyan készítek tökéletes kört border-radius-szal?
Állítsa be a border-radius értékét 50%-ra egy négyzet alakú elemen (azonos szélesség és magasság). Ellipszishez használja a border-radius: 50% értéket egy téglalap alakú elemen.
Milyen mértékegységeket használhatok border-radius-hoz?
A border-radius elfogad px, %, em, rem, vw, vh és más CSS hosszúság mértékegységeket. A százalékok az elem méreteihez viszonyulnak.
Mi a border-radius rövidített szintaxisa?
A rövidítés a következő mintát követi: bal-felső jobb-felső jobb-alsó bal-alsó. Egy érték minden sarokra vonatkozik. Két érték a bal-felső/jobb-alsó és jobb-felső/bal-alsó sarkokat állítja be.
Készíthetek ellipszis sarkokat?
Igen, a perjel (/) szintaxis segítségével külön vízszintes és függőleges sugarakat definiálhat. Például border-radius: 50% / 100px.
Minden elemen működik a border-radius?
A border-radius a legtöbb HTML elemen működik, beleértve a div, button, img és input elemeket. overflow: hidden nélkül azonban nem vágja le a túlfolyó tartalmat.
Készíthetek komplex alakzatokat border-radius-szal?
Igen, minden sarokhoz különböző sugár értékeket kombinálva készíthet pirulákat, oválisokat, leveleket és egyedi organikus alakzatokat.
Minden böngésző támogatja a border-radius-t?
Igen, a border-radius minden modern böngészőben támogatott, beleértve a Chrome, Firefox, Safari, Edge és mobil böngészőket.
Hogyan készítek pirula alakú gombot?
Állítsa be a border-radius értékét az elem magasságának felével egyenlő vagy annál nagyobb értékre. Egy 40px magas gombnál használjon border-radius: 20px vagy magasabb értéket.
A border-radius befolyásolja a háttérképeket?
Igen, a border-radius levágja az elem hátterét, háttérképét és szegélyét. A háttér automatikusan követi a lekerekített sarkokat.
Animálhatom a border-radius-t?
Igen, a border-radius animálható CSS átmenetekkel és animációkkal. Folyamatosan átjárhat különböző sugár értékek között.
Használhatom a border-radius-t CSS transzformációkkal?
Igen, a border-radius jól működik CSS transzformációkkal, mint a rotate, scale és translate.
Hogyan készítek kört szegéllyel?
Alkalmazza a border-radius: 50% értéket egy négyzet alakú elemen azonos szélességgel és magassággal, majd adjon hozzá egy border tulajdonságot.
Mi a különbség az egyedi sarok tulajdonságok és a rövidítés között?
Az egyedi tulajdonságok, mint a border-top-left-radius, pontos kontrollt adnak minden sarok felett. A rövidítés lehetővé teszi több sarok beállítását egy nyilatkozatban.
A(z) CSS Border Radius Generátor használata
Tervezd meg a lekerekített sarkokat vizuálisan ezzel a CSS border-radius generátorral. Minden lokálisan fut a böngésződben, és nem töltődik fel adat.
- Válaszd ki a px, %, em vagy rem egységet a Unit legördülő listában.
- Húzd a Top Left, Top Right, Bottom Right és Bottom Left csúszkákat, hogy minden sarkot külön lekerekíts.
- Kapcsold be a Link all corners kapcsolót, ha egyetlen értéket szeretnél mind a négy sarokra alkalmazni.
- Másold ki a generált CSS-t az előnézetből, és illeszd be a stíluslapodba.
Mind a négy sarok 50%-os értéke tökéletes kört vagy kapszulát ad; em vagy rem használatával a sugár a tipográfiával együtt skálázódik.
Kapcsolódó eszközök
- 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.
- 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 Grid generátor Ingyenes vizuális CSS Grid generátor élő előnézettel. Tervezzen reszponzív rácsos elrendezéseket interaktívan, és exportáljon kész CSS kódot azonnal.
- CSS Flexbox generátor Vizuális CSS Flexbox generátor élő előnézettel. Állítsa be a flex tulajdonságokat és kapjon azonnal használható CSS kódot.
- 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.
- 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.