Siirry pääsisältöön
LibraTool logoLibraTool

CSS-kulmapyöristyksen generaattori ilmaiseksi

Suunnittele pyöristettyjä kulmia visuaalisesti itsenäisellä jokaisen kulman hallinnalla. Tukee elliptistä X/Y-syntaksia orgaanisille muoroille.

Toimii offline-tilassa kerran ladattuna
border-radius: 20px 20px 20px 20px;
Yksikkö

Yleiset käyttötavat

  • Orgaaniset Blob-muodotKäytä elliptistä X/Y-syntaksia luodaksesi ainutlaatuisia blob-muotoja hero-osioille ja kuvituksille.
  • Kortin ja Säilön KulmatVakio pyöristetyt kulmat korteille, säilöille ja paneeleille modernissa UI-suunnittelussa.
  • Avatar- ja Profiilikusvan MuodotLuo oikea kulmityyli profiilikuville: pyöreä, squircle tai pyöristetty neliö.
  • Pillerit, Tunnisteet ja MerkitRakenna täysin pyöristettyjä pilleri-painikkeita, tunnisteita ja merkkejä 9999-esiasetuksella.
  • Epäsymmetriset Kulmien MallitSekoita säteet kulmien yli luodaksesi erottuvia, merkkitunukselta tunnistettavia kortti- ja painikkemuotoja.

Miten se toimii

Reunan pyöristys -generaattori toimii kokonaan selaimessa — palvelinta, kirjastoa tai latausta ei ole. Se rakentaa CSS:n border-radius-arvomerkkijonon suoraan JavaScriptissä käyttäen Reactin tilaa ja useMemo-hookia, ja soveltaa sitä sitten inline-tyylinä elävään div-elementtiin, jotta selaimen oma CSS-moottori piirtää muodon reaaliajassa.

  1. 1
    Liukusäätimet kirjoittavat tilaa
    Jokainen liukusäädin kirjoittaa yhteen kahdeksasta numeerisesta tilamuuttujasta — neljä vaakasuuntaista kulmasädettä ja neljä pystysuuntaista elliptistä tilaa varten. Yhtenäinen tila supistaa kaikki kahdeksan yhdeksi liukusäätimeksi setAll-apufunktion kautta, joka synkronoi jokaisen arvon kerralla.
  2. 2
    useMemo kokoaa CSS-arvon
    useMemo-hook laskee border-radius-merkkijonon uudelleen aina, kun jokin kulma-arvo, yksikkö (px tai %) tai elliptinen kytkin muuttuu. Vakiotilassa se tuottaa neliarvoisen lyhenteen; elliptisen ollessa päällä se lisää kauttaviivaerottimen kahdeksanarvoista syntaksia varten — esim. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Selaimen CSS-moottori piirtää esikatselun
    Laskettu merkkijono asetetaan inline-tyylin borderRadius-ominaisuudeksi tavalliseen div-elementtiin. Selaimen asettelumoottori hoitaa kaiken piirtämisen — ei kanvasta, ei SVG:tä eikä kolmannen osapuolen piirtokoodia.
  4. 4
    Clipboard-rajapinta kopioi tulosteen
    Kopioi-painikkeen napsauttaminen kutsuu navigator.clipboard.writeText-funktiota joko CSS-määrityksellä (border-radius: ...;) tai vastaavalla Tailwind-mielivaltaisarvoluokalla (rounded-[...]), riippuen valitusta muotokytkimestä.

Liittyvät työkalut

🎨

CSS-varjogeneraattori

Visuaalinen rakentaja CSS:n box-shadow-ominaisuudelle reaaliaikaisella esikatselulla, monikerrospinoamisella, värinvalitsimella, sisävarjovaihtoehdolla ja yhdellä napsautuksella kopioitavalla. Sisältää Material-, neumorfismi- ja hehkuesimääritetyt arvot.

Kokeile sitä
🟦

CSS-verkon generaattori

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Kokeile sitä
↔️

CSS Flexbox -generaattori

Kokeile flex-suuntaa, käärintää, tasaus ja linjaus reaaliaikaisilla kohteilla — ja kopioi CSS.

Kokeile sitä

Usein kysytyt kysymykset