Pereiti prie pagrindinio turinio
LibraTool logoLibraTool

CSS kampų apvalinimo generatorius nemokamai

Vizualiai projektuokite apvalintas kampus su nepriklausomu kiekvieno kampo valdymu. Palaiko elipsinę X/Y sintaksę organinėms formoms.

Veikia neprisijungus, kai įkeliama
border-radius: 20px 20px 20px 20px;
Vienetas

Dažniausi naudojimo būdai

  • Organinės Blob FormosNaudokite eliptinę X/Y sintaksę, kad sukurtumėte unikalias blob formas herojaus sekcijoms ir iliustracijom.
  • Kortelės ir Konteinerio KampaiStandartiniai suapvalinti kampai kortelėms, konteineriams ir skydeliams šiuolaikiniame UI dizaine.
  • Avataras & Profilio Nuotrauko FormosSukurkite tinkamą kampo stilių profilio nuotraukoms: apvalią, squircle arba suapvalintą kvadratą.
  • Tabletės, Žymos ir ŽenklelisSukurkite tobulai suapvalintus tabletės mygtukus, žymas ir ženklelius naudodami 9999 nuostatą.
  • Asimetrinės Kampo DizainoSumaišykite spindulius visame kampe, kad sukurtumėte skirtingus, prekės ženklo atpažįstamus kortelės ir mygtuko formas.

Kaip tai veikia

Border-radius generatorius veikia visiškai naršyklėje — jokio serverio, bibliotekos ar įkėlimo. Jis sukonstruoja CSS border-radius reikšmės eilutę tiesiogiai JavaScript kodu, naudodamas React būseną ir useMemo, tada pritaiko ją kaip vidinį stilių gyvame div elemente, kad pati naršyklės CSS variklis realiu laiku atvaizduotų formą.

  1. 1
    Slankikliai rašo būseną
    Kiekvienas intervalo įvesties laukas rašo į vieną iš aštuonių skaitinių būsenos kintamųjų — keturis horizontalius kampų spindulius ir keturis vertikalius elipsiniam režimui. Suvienodinto režimo metu visi aštuoni sutraukiami į vieną slankiklį per setAll pagalbinę funkciją, kuri sinchronizuoja visas reikšmes vienu metu.
  2. 2
    useMemo sukuria CSS reikšmę
    useMemo kablys perskaičiuoja border-radius eilutę kaskart, kai pasikeičia bet kokia kampo reikšmė, vienetas (px ar %) ar elipsinis perjungiklis. Standartiniame režime jis sukuria keturių reikšmių trumpąją formą; įjungus elipsinį režimą, pridedamas pasvirasis brūkšnys pilnai aštuonių reikšmių sintaksei — pvz., 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Naršyklės CSS variklis atvaizduoja peržiūrą
    Apskaičiuota eilutė nustatoma kaip vidinis borderRadius stilius paprastame div elemente. Visą atvaizdavimą atlieka naršyklės išdėstymo variklis — čia nėra jokio canvas, SVG ar trečiosios šalies piešimo kodo.
  4. 4
    Clipboard API kopijuoja išvestį
    Spustelėjus „Kopijuoti“, iškviečiama navigator.clipboard.writeText su CSS deklaracija (border-radius: ...;) arba lygiaverte Tailwind savavalės reikšmės klase (rounded-[...]), priklausomai nuo pasirinkto formato perjungiklio.

Susiję įrankiai

🎨

CSS dėžutės šešėlio generatorius

Vizualinis CSS box-shadow kūrimo įrankis su tiesiogine peržiūra, kelių sluoksnių kaupimu, spalvų parinkikliu, vidinio šešėlio perjungikliu ir kopijavimu vienu paspaudimu. Apima „Material“, neomorfizmo ir švytėjimo šablonus.

Išbandykite
🟦

CSS tinklelio generatorius

Vizualiai sukurkite CSS tinklelį – takelius, vienetus ir tarpus – ir nukopijuokite sugeneruotą CSS ir HTML.

Išbandykite
↔️

CSS Flexbox generatorius

Eksperimentuokite su flex kryptimi, vyniojimu, išdėstymu (justify) ir lygiavimu (align) gyvuose elementuose – ir nukopijuokite CSS.

Išbandykite

Dažnai užduodami klausimai