CodeKitHubMikä tämä työkalu on?
border-radius on CSS-ominaisuus, joka pyöristää elementin kulmat. Käsin kirjoitettuna se ottaa neljä arvoa kiinteässä järjestyksessä — vasen yläkulma, oikea yläkulma, oikea alakulma, vasen alakulma — mikä on helppo sekoittaa keskenään, varsinkin kun neljä kulmaa eroavat toisistaan.
Tämä työkalu poistaa arvailun: liikuta liukusäädintä, katso kulman pyöristyvän live-esikatselussa ja lue tarkka CSS luodusta koodilaatikosta. Yksi lukituskytkin vaihtaa yhtenäisen säteen (kaikki neljä kulmaa samat, yleisin tapaus) ja neljän itsenäisen liukusäätimen välillä orgaanisia, epäsymmetrisiä muotoja varten.
Miksi käyttää sitä?
- Live-esikatselu päivittyy välittömästi vetäessäsi — ei tarvitse muokata CSS:ää ja päivittää sivua nähdäksesi tuloksen.
- Yhden napsautuksen lukitus yleiselle 'sama säde joka kulmassa' -tapaukselle; avaa lukitus pillerinmuotoisia painikkeita, puhekuplia ja muhkuramuotoja varten.
- Tulostaa lyhennetyn yksiarvoisen muodon, kun kaikki kulmat täsmäävät, tai täyden neliarvoisen muodon, kun eivät täsmää — kopioi ja liitä valmis kummassakin tapauksessa.
- Toimii kokonaan selaimessasi. Mitään syöttämääsi ei lähetetä minnekään.
- Ilmainen, ei rekisteröitymistä, toimii mobiilissa.
Käyttöohje
- Jätä 'lukitse kaikki kulmat' valituksi ja vedä mitä tahansa liukusäädintä asettaaksesi yhtenäisen säteen koko laatikolle.
- Poista lukitus hallitaksesi jokaista kulmaa itsenäisesti — hyödyllistä pillerinmuotoja, kyynelmuotoja ja epäsymmetrisiä kortteja varten.
- Katso esikatselulaatikon päivittyvän elävästi jokaista liukusäädintä säätäessäsi.
- Kopioi luotu CSS koodilaatikosta ja liitä se tyylitiedostoosi.
Esimerkki
Syöte
Vasen ylä: 40px, Oikea ylä: 8px, Oikea ala: 40px, Vasen ala: 8pxTuloste
border-radius: 40px 8px 40px 8px;Tällaiset epäsymmetriset vastakkaiset kulmat luovat lehti- tai teräsiluetin — yleinen tehokeino kortti- ja merkkisuunnittelussa.
px vai % — kumpaa yksikköä käyttää?
Tämä generaattori tuottaa pikseliarvoja, mikä on oikea oletus useimpiin käyttöliittymätöihin: painikkeet, kortit ja syöttökentät, joissa halutaan kiinteä, ennustettava kulmasäde elementin koosta riippumatta.
Prosentit toimivat eri tavalla — ne ovat suhteessa elementin omaan leveyteen ja korkeuteen, joten 50 %:n säde neliönmuotoisella elementillä tuottaa täydellisen ympyrän, ja ei-neliönmuotoisella elementillä ellipsin. Jos haluat tämän efektin (avatarit, muhkuramuodot, jotka skaalautuvat säiliön mukana), ota luotu CSS ja vaihda px-arvot käsin %-arvoksi — esimerkiksi border-radius: 50% muuttaa minkä tahansa neliölaatikon ympyräksi.
Yleisiä border-radius-kuvioita
- Pyöristetty kortti: kaikki kulmat yhtä suuret, noin 8–16px käyttöliittymäkomponenteille.
- Pillerinmuotoinen painike: aseta säde puoleen elementin korkeudesta (tai käytä vain 9999px, joka rajautuu täydeksi pilleriksi korkeudesta riippumatta).
- Ympyräavatar: border-radius: 50% neliönmuotoisella (yhtä suuri leveys ja korkeus) elementillä.
- Puhekupla: kolme kulmaa pyöristetty, yksi terävä — aseta kolme liukusäädintä korkealle ja yksi nollaan.
- Lehti-/terämuoto: vastakkaiset kulmat täsmäävät, viereiset kulmat eroavat — esim. vasen ylä ja oikea ala molemmat suuret, oikea ylä ja vasen ala molemmat pienet.
Yhdistäminen varjoon
Pyöristetyt kulmat esiintyvät harvoin yksinään — kortit ja painikkeet tarvitsevat yleensä myös hieman varjoa syvyyden luomiseksi. Käytä Box Shadow -generaattoria säätääksesi pudotusvarjon ja kohdista molemmat luodut CSS-koodit samaan elementtiin.
Usein kysytyt kysymykset
Mitä eroa on border-radiuksella ja kulmien järjestyksellä?
CSS-lyhennemuoto noudattaa aina järjestystä vasen ylä, oikea ylä, oikea ala, vasen ala, myötäpäivään vasemmasta yläkulmasta alkaen. Tämän työkalun neljä liukusäädintä on merkitty vastaavasti, joten sinun ei koskaan tarvitse muistaa järjestystä itse.
Voinko käyttää eri yksiköitä jokaisessa kulmassa?
Kyllä, oikeassa CSS:ssä voit sekoittaa px-, %-, em- ja rem-yksiköitä kulmien välillä, vaikka se on harvinaista käytännössä. Tämä työkalu tuottaa yksinkertaisuuden vuoksi yhtenäisiä px-arvoja — vaihda mikä tahansa yksittäinen arvo %-yksikköön tai muuhun yksikköön suoraan tyylitiedostossasi, jos tarvitset sekoitettuja yksiköitä.
Miksi border-radius: 50% tekee joskus soikion ympyrän sijaan?
Koska prosentit ovat suhteessa kumpaankin akseliin itsenäisesti — vaakasäde on prosenttiosuus elementin leveydestä, pystysäde prosenttiosuus sen korkeudesta. Neliönmuotoisella elementillä (yhtä suuri leveys ja korkeus) tämä tuottaa täydellisen ympyrän; suorakulmiolla se tuottaa ellipsin.
Vaikuttaako border-radius myös taustakuviin ja reunuksiin?
Kyllä — border-radius rajaa elementin taustan, reunuksen ja (moderneissa selaimissa) sen box-shadow'n pyöristettyyn muotoon. Se ei rajaa ylivuotavaa lapsisisältöä, ellet myös aseta overflow: hidden vanhempielementille.
Onko säteelle rajaa, kuinka suuri se voi olla?
Ei kovaa rajaa — jos säde ylittää puolet elementin leveydestä tai korkeudesta, selaimet rajoittavat sen niin, että kyseisen sivun kaksi kaarta kohtaavat täsmälleen keskellä, mikä on tapa muuttaa neliö täydelliseksi ympyräksi tai pillerinmuodoksi.
Miten teen pillerinmuodon tai täydellisen ympyrän?
Pillerin (kapselin) muotoa varten aseta säde vähintään puoleen elementin korkeudesta — yleinen niksi on border-radius: 9999px, joka toimii missä tahansa korkeudessa, koska selain rajoittaa kaaren automaattisesti. Täydellinen ympyrä tarvitsee kaksi asiaa: yhtä suuren leveyden ja korkeuden, sekä border-radius: 50%.