CSS border-radius generátor
Hozz létre border-radius rövidítést sarkonként megadott értékekből, elliptikus sarkok és Tailwind egyenértékesség segítségével.
CSS border-radius generátor
Adjon meg sugarat minden sarknál, és ez az eszköz létrehozza az Ön számára helyes border-radius CSS-t, lezárva a legrövidebb érvényes rövidítésre — egy érték, ha az összes négy sarok egyezik, kettő vagy három, ha az ellentétes sarkok ismétlődnek, és a teljes négy értékes lista, ha minden sarok különbözik. A kártyák, gombok, avatárok, modalok vagy beviteli mezők formázásához készült azoknak, akik tiszta, másolt CSS-t akarnak, anélkül, hogy manuálisan tennék meg a sarokkészítést.
Válassza a "Azonos minden sarkon" lehetőséget egy egyszerű kerekített téglalaphoz, vagy váltson az "Egyedi sarkok" opcióra, hogy minden sarkot egymástól függetlenül hangoljon px, százalék vagy rem mértékegységben. Az elliptikus sarkok engedélyezésével az nyolcértékes perjeles jelölés kerül hozzáadásra, amelyet a border-radius támogat — egy vízszintes sugár és egy különálló függőleges sugár sarkonként, egy arányszabályozóval vezérelve, így az asszimmetrikus forma vagy egy lapos pille alakú forma csak egy drag-os mozgatást igényel nyolc mező helyett. A "Véletlenszerű szerves blob" opció új aszimmetrikus alakzatot hoz létre futásonként, olyan finom, szabálytalan körvonalakkal, amelyeket heroikus képek mögött és dekoratív blobokból szokás használni. Váltson a border-radius rövidítés és a négy kiterjesztett border-*-radius tulajdonság közül, és kapcsolja be a Tailwind opciót, hogy megkapja a megfelelő tetszőleges értékű hasznosságosztályt az egyszerű CSS mellett.
Az értékeket a gépelés közben ellenőrzik: a negatív számokat nullaként kezelik, és nincs olyan állapot, amely hibás CSS-t generálna. Az outputablak alatt található élő tally beszámol, hogy hány deklaráció sor lett generálva, hány különálló sarokérték összeomlott a rövidítésre, és a pontos karakterszám, amely frissül, ahogyan beállít bármilyen opciót.
Mindenki helyileg fut a böngészőjében — semmilyen sarokérték vagy generált CSS soha nem kerül sehova. Másolja az eredményt, töltse le .txt fájlként, vagy küldje közvetlenül egy másik eszköz bemenetébe, hogy tovább dolgozhasson rajta.