Border-radius Generaattori
Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
Mitä border-radius:n 8 arvon syntaksi tarkoittaa?
Syntaksissa border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 arvot ennen kauttaviivaa ovat vaakasäteet (vasen ylä, oikea ylä, oikea ala, vasen ala) ja sen jälkeiset arvot pystysäteet. Eri arvot kummassakin suunnassa luovat orgaaniset blob-muodot.
Miten käytän generoitua CSS:ää?
Kopioi border-radius-rivi ja liitä se mihin tahansa muotoiltavan elementin CSS-sääntöön, esim. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Toimii puhtaassa CSS:ssä, Sassissa, Tailwindin arbitrary value -arvoissa ja inline-tyyleissä.
Missä blob-muotoja käytetään?
Blob-muotoja käytetään paljon hero-kuvituksissa, avatar- ja profiilikuvissa, ominaisuuskorteissa, painikkeissa ja koristetaustoissa nykyaikaisessa web- ja sovellussuunnittelussa.
Toimiiko pyöristetyt kulmat kaikissa selaimissa?
Kyllä. border-radius on tuettu kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari, Edge ja mobiiliselaimet, ilman valmistajaprefixejä.
Voinko animoida blob-muodon?
Kyllä. border-radius on animoitava ominaisuus, joten CSS-siirtymällä muodot voivat muuttua pehmeästi toisikseen, esim. .blob { transition: border-radius .8s ease; }.
Mikä on 4 arvon ja 8 arvon syntaksin ero?
4 arvon muoto asettaa jokaiselle kulmalle saman vaaka- ja pystysäteen, mikä riittää kapseleihin ja ympyröihin. 8 arvon muoto erottaa vaaka- ja pystysäteet, mikä mahdollistaa epäsymmetriset orgaaniset muodot.
Miten luon täydellisen ympyrän?
Aseta kaikki kahdeksan arvoa 50 %:iin neliömuotoisessa elementissä tai käytä yksinkertaisesti border-radius: 50%. Voit myös aloittaa ympyrää muistuttavasta pohjasta ja hienosäätää.
Ladataanko tietojani jonnekin?
Ei. Generaattori toimii kokonaan selaimessasi puhdalla CSS:llä ja JavaScriptillä. Mitään raahaamaasi, kirjoittamaasi tai kopioimaasi ei lähetetä palvelimille.
Voinko käyttää tätä ei-neliömuotoisissa elementeissä?
Voit, mutta prosenttisäteet suhteutuvat elementin mittoihin, joten suorakaidettaessa kulmista tulee ellipsismuotoiset ja tulos näyttää erilaiselta kuin neliöesikatselu. Käytä generoituja arvoja lähtökohtana ja säädä niitä.
Näin käytät työkalua Border-radius Generaattori
Kahdeksanarvoinen border-radius tuottaa orgaanisia blob-muotoja, joiden elliptiset kulmat jäävät tavalliselta pyöristetyltä suorakulmiolta saavuttamatta. Muotoile vetokahvoilla ja kopioi valmis CSS — kaikki renderöidään livenä selaimessasi.
- Vedä kahdeksasta muodon reunoilla olevasta kahvasta — ylä- ja alareunan kahvat säätävät vaakasäteitä ja sivujen kahvat pystysäteitä.
- Napsauta kuudesta valmiin muodon ruudusta yhtä lähteäksesi suunnitellusta blobista ja hienosäädä sitten arvot Vaakasäteet- ja Pystysäteet-kentissä (yksi per kulma, 0–100 %).
- Paina Satunnainen luodaksesi yhdellä napsautuksella uuden orgaanisen muodon, tai Nollaa palataksesi oletusmuotoon ja -väreihin.
- Valitse Muodon väri ja Tausta nähdäksesi blobin kohdepalettiasi vasten — molemmat päivittyvät heti.
- Paina Kopioi CSS ottaaksesi alareunassa livenä näkyvän border-radius-määrittelyn ja liittääksesi sen mihin tahansa elementtiin.
Käytä koodia neliöllä elementillä yhdessä overflow: hidden kanssa klassiseen blob-lookiin; prosentit pitävät käyrän sulavana kaikissa ko'oissa, ja syntaksin kauttaviiva erottaa vaakasäteet pystysäteistä.
Aiheeseen liittyvät työkalut
- CSS Border Radius Generaattori Visuaalinen CSS border-radius generaattori. Säädä jokaista kulmaa itsenäisesti reaaliaikaisella esikatselulla ja kopioi CSS-koodi välittömästi.
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- CSS Box Shadow Generaattori Ilmainen online CSS box-shadow generaattori. Luo kauniita varjoja visuaalisesti säädettävällä siirtymällä, sumennuksella, leviämisellä, värillä ja insetillä. Live-esikatselu ja välitön koodin kopiointi.
- Väripaletingeneraattori Luo kauniita, harmonisia väripaletteja hetkessä ilmaisella online-työkalullamme. Tukee monokromaattisia, analogisia, komplementäärisiä, triadisia, jaetusti komplementäärisiä ja tetradisia tiloja. Säädä värejä HSL-liukusäätimillä, lukitse suosikit ja vie CSS-, Tailwind-, JSON- tai SVG-muodossa. 100% selainpohjainen, tietosi eivät koskaan poistu laitteeltasi.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.
- CSS clip-path generaattori Ilmainen online CSS clip-path generaattori. Suunnittele polygon-, circle-, ellipse- ja inset-muodot raahattavilla pisteillä, live-esikatselulla ja CSS-koodin kopioinnilla yhdellä klikkauksella.