Tärkeimmät kohdat
- 01Kolme moodia — yhtenäinen, kulmittain ja elliptinen — kattavat kaiken yksinkertaisista pyöreistä painikkeista orgaanisiin muotoihin.
- 02Tukee px-, %- ja rem-yksiköitä, joilla jokaisella on eri skaalautumiskäyttäytyminen.
- 03Elliptinen moodi näyttää vaakasuuntaiset ja pystysuuntaiset säteet kulmittain CSS-reunasäteen täydelle syntaksille.
- 04Reaaliaikainen esikatselu käyttää varsinaista CSS-ominaisuutta, joten näkemäsi on täsmälleen sitä, mitä selaimesi näyttää.
Yksinkertaisista pyöreistä kulmista orgaanisiin muotoihin
Neljän kulman reunasäteiden arvo on tarpeeksi helppo kirjoittaa muistista — border-radius: 8px. Mutta kun tarvitset eri säteitä kulmittain tai haluat elliptistä CSS-syntaksia orgaanisille muodoille, lyhytsana tulee nopeasti kryptiseksi. Täysi muoto on top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — kahdeksan arvoa tietyssä järjestyksessä.
Handytoolin reunasäteiden generaattori antaa sinun vetää liu'utimia jokaiselle kulmalle missä tahansa moodissa ja nähdä muodon päivittyvän reaaliajassa. Vaihda px:n, %:n ja rem:n välillä ilman uudelleen laskemista ja kopioi oikea lyhennetty tai pitkä CSS-julistus, kun olet valmis.
Reunasäteiden suunnittelu
- 01
Valitse moodi
Yhtenäinen moodi soveltaa yhtä sädetta kaikkiin neljään kulmaan. Kulmittain-moodi ohjaa jokaista kulmaa itsenäisesti. Elliptinen moodi lisää erillisen vaakasuuntaisen ja pystysuuntaisen säteen kulmittain.
- 02
Valitse yksikkö
Valitse px absoluuttisille kokoluokille, % arvoille, jotka skaalautuvat elementin mittojen mukaan, tai rem koon mukaan, joka on sidottu juuren fontin kokoon.
- 03
Vedä liu'utimia
Säädä säteen arvoja ja katso esikatselu-elementi päivittyvän reaaliajassa. Kulmittain-moodissa vedä jokaisen kulman liu'utinta itsenäisesti.
- 04
Esikatsele muoto
Esikatselu-ruutu soveltaa varsinaista CSS border-radius -ominaisuutta, joten näkemäsi muoto on muoto, jonka selaimesi näyttää.
- 05
Kopioi CSS
Klikkaa Kopioi saadaksesi border-radius -julistuksen ja liitä se tyylisäädöstösi.
Yleiset muodot ja milloin käyttää kutakin moodia
- 01Pillerin painike: yhtenäinen % moodi, aseta 50 % — aina täysi pilleri riippumatta painikkeen leveydestä
- 02Kortti hienovaraisella pyöristyksellä: yhtenäinen px moodi, 8–16px — yleisin käyttöliittymän kuvio
- 03Epäsymmetrinen tagi tai merkintä: kulmittain-moodi, terävä toisella puolella, pyöreä toisella
- 04Avatar-ympyrä: yhtenäinen % moodi, 50 % — skaalautuu kuvakontin kanssa
- 05Orgaaninen muoto: elliptinen moodi eri X/Y-arvoilla kulmittain
Välitön esikatselu, mitään ei ladattu
Reunasäteiden generaattori on kokonaan asiakaspuolinen. Liu'utimet, moodin vaihto ja yksikön muutokset päivittävät esikatselun välittömästi ilman palvelinten välistä liikkumista. Ei tiliä eikä nopeusrajoitusta.
Työkalu toimii kaikissa moderneissa selaimissa. Reunasäde-ominaisuus — mukaan lukien elliptinen X/Y-syntaksi — on tuettu kaikissa Safarin, Firefoxin, Edgen ja Chromen jokaisessa evergreen-versiossa, joten lähtötieto on turvallista käyttää ilman myyjän etuliitteitä tai varasuunnitelmia.
Reunasäteiden generaattori — UKK
Mitä eroa on px:n ja %:n välillä reunasäteelle?
Pikselipohjaiset säteet ovat absoluuttisia — 16px on aina 16px. Prosentuaaliset säteet ovat suhteessa elementin mittoihin, joten 50 % luo täydellisen ympyrän neliölaatikkoon ja ellipsin suorakaiteen.
Milloin minun tulisi käyttää elliptistä moodia?
Käytä elliptistä moodia, kun haluat kulman, joka pullistuu enemmän yhtä akselia pitkin — vaakasäteiselle pillerille, lehtien muodolle tai orgaaniselle muodolle. CSS ilmaisee tämän X-säteiksi / Y-säteiksi reunasäteen lyhennyksessä.
Miksi prosenttisäteni näyttää väärältä ei-neliön muotoisella laatikolla?
Vaakasäteiset prosentit ovat suhteessa elementin leveyteen; pystysuuntaiset säteet korkeuteen. Leveällä, matalalla elementillä kulmat venyttyvät ellipseiksi ympyräkaarien sijaan.
Toimiiko lähtötieto jokaisessa selaimessa?
Kyllä — reunasäde mukaan lukien elliptinen syntaksi on tuettu kaikissa moderneissa selaimissa: kaikissa Safarin, Firefoxin, Edgen ja Chromen evergreen-versioissa. Myyjän etuliitteitä ei tarvita.
Kuinka luon täydellisen ympyrän reunasäteellä?
Aseta kaikki kulmat 50 %:iin prosenttimoodissa neliölementissä. Elementillä on myös oltava yhtä suuri leveys ja korkeus — käytä aspect-ratio: 1 / 1 jos koko on dynaaminen.