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.
Mikä on CSS border-radius?
CSS border-radius on ominaisuus, joka pyöristää elementin ulkoreunan kulmat. Voit asettaa jokaisen kulman itsenäisesti käyttäen yhtä neljään arvoon.
Miten teen täydellisen ympyrän border-radiusilla?
Aseta border-radius arvoon 50% neliömäiselle elementille (sama leveys ja korkeus). Ellipsille käytä border-radius: 50% suorakulmaisella elementillä.
Mitä yksiköitä voin käyttää border-radiusin kanssa?
Border-radius hyväksyy px, %, em, rem, vw, vh ja muut CSS-pituusyksiköt. Prosentit ovat suhteellisia elementin mittoihin.
Mikä on border-radiusin lyhyt syntaksi?
Lyhyt syntaksi noudattaa kaavaa: ylävasen yläoikea alaoikea alavasen. Yksi arvo koskee kaikkia kulmia. Kaksi arvoa asettaa ylävasen/alaoikea ja yläoikea/alavasen.
Voinko luoda elliptisiä kulmia?
Kyllä, käyttämällä vinoviiva (/) syntaksia voit määrittää erilliset vaaka- ja pystysäteet. Esimerkiksi border-radius: 50% / 100px.
Toimiiko border-radius kaikilla elementeillä?
Border-radius toimii useimmilla HTML-elementeillä, mukaan lukien div, button, img ja input. Ilman overflow: hidden se ei kuitenkaan välttämättä leikkaa ylivuotavaa sisältöä.
Voinko luoda monimutkaisia muotoja border-radiusilla?
Kyllä, yhdistämällä erilaisia sädearvoja jokaiselle kulmalle voit luoda pillereitä, soikeita, lehtiä ja mukautettuja orgaanisia muotoja.
Tukevatko kaikki selaimet border-radiusia?
Kyllä, border-radius on tuettu kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari, Edge ja mobiiliselaimet.
Miten teen pillerinmuotoisen painikkeen?
Aseta border-radius arvoon, joka on yhtä suuri tai suurempi kuin puolet elementin korkeudesta. 40px korkealle painikkeelle käytä border-radius: 20px tai korkeampi.
Vaikuttaako border-radius taustakuviin?
Kyllä, border-radius leikkaa elementin taustan, taustakuvan ja reunuksen. Tausta seuraa automaattisesti pyöristettyjä kulmia.
Voinko animoida border-radiusin?
Kyllä, border-radius on animoitavissa CSS-siirtymillä ja animaatioilla. Voit siirtyä sujuvasti eri sädearvojen välillä.
Voinko käyttää border-radiusia CSS-muunnosten kanssa?
Kyllä, border-radius toimii hyvin CSS-muunnosten kuten rotate, scale ja translate kanssa.
Miten luon ympyrän reunuksella?
Käytä border-radius: 50% neliömäiselle elementille, jolla on sama leveys ja korkeus, ja lisää sitten border-ominaisuus.
Mikä on ero yksittäisten kulmaominaisuuksien ja lyhyen syntaksin välillä?
Yksittäiset ominaisuudet kuten border-top-left-radius antavat tarkan hallinnan jokaiselle kulmalle. Lyhyt syntaksi mahdollistaa useiden kulmien asettamisen yhdellä lausumalla.
Näin käytät työkalua CSS Border Radius Generaattori
Muotoile kulmien pyöristykset visuaalisesti tällä CSS border-radius -generaattorilla. Kaikki toimii paikallisesti selaimessasi, eikä tietoja lähetetä mihinkään.
- Valitse px, %, em tai rem Unit-alasvetovalikosta.
- Raahaa Top Left-, Top Right-, Bottom Right- ja Bottom Left-liukusäätimiä pyöristääksesi jokaisen kulman erikseen.
- Ota Link all corners käyttöön, jos haluat asettaa yhden arvon kaikille neljälle kulmalle kerralla.
- Kopioi luotu CSS esikatselusta ja liitä se tyylisivuusi.
50 % joka kulmassa muodostaa täydellisen ympyrän tai kapselin; em tai rem saa säteen skaalautumaan typografian mukana.
Aiheeseen liittyvät työkalut
- 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.
- 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 Grid-generaattori Ilmainen visuaalinen CSS Grid-generaattori live-esikatselulla. Suunnittele responsiivisia grid-asetteluja interaktiivisesti ja vie tuotantovalmis CSS-koodi heti.
- CSS Flexbox-generaattori Visuaalinen CSS Flexbox-generaattori live-esikatselulla. Säädä flex-ominaisuuksia ja saa heti käyttövalmis CSS-koodi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- 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.