Border-radius-generaattori

Näin käytät border-radius-generaattoria

1. Vedä esikatselun reunoilla olevia pisteitä. Jokainen värillinen piste asettaa yhden kulman vaakasuoran säteen. Kun Elliptiset kulmat (8 arvoa) on valittuna, valkoiset pisteet asettavat pystysäteet.
2. Voit myös kirjoittaa tarkat arvot kohtaan Kulmat: Vasen yläkulma, Oikea yläkulma, Oikea alakulma ja Vasen alakulma. Jokaisella on oma Vaakasuora- ja Pystysuora-kenttänsä.
3. Valitse Yksikkö: % (prosenttia laatikosta) tai px (pikseliä). Yksikön vaihto muuntaa nykyiset arvot, joten muoto pysyy samana.
4. Aseta Laatikon leveys (px) ja Laatikon korkeus (px) vastaamaan elementtiäsi. Kaikki kulmat pyöristää kaikki kulmat kerralla.
5. Kokeile Esiasetukset-kohdan vaihtoehtoja (Pyöristetty, Pilleri, Ympyrä, Lehti, Pisara, Muna, Lippu ja kolme möykkyä) tai napsauta Satunnainen möykky saadaksesi orgaanisen muodon.
6. Valitse Yksittäiset ominaisuudet, jos haluat käyttää neljää border-*-radius-määrittelyä, ja kopioi sitten CSS-koodi painikkeella Kopioi.

Näppäimistö: kohdista piste ja paina nuolinäppäimiä, niin sen säde muuttuu yhden askeleen (Shiftillä 10).

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

border-radius-ominaisuuden syntaksi

border-radius ottaa yhdestä neljään arvoa tässä järjestyksessä: vasen yläkulma, oikea yläkulma, oikea alakulma, vasen alakulma. Kuten marginaaleissa, puuttuvat arvot kopioidaan vastakkaisesta kulmasta: border-radius: 10px 20px pyöristää vasemman ylä- ja oikean alakulman 10 pikselillä ja kaksi muuta 20 pikselillä. Työkalu kirjoittaa aina lyhimmän vastaavan muodon.

Jokainen kulma on todellisuudessa neljännes ellipsistä, jolla on kaksi sädettä. Vinoviiva erottaa vaakasuorat säteet pystysuorista, jolloin arvoja voi olla enintään kahdeksan:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Ennen vinoviivaa ovat neljän kulman vaakasuorat säteet ja sen jälkeen pystysuorat. Kun molemmat luettelot ovat samat, vinoviivan jälkeinen osa jätetään pois.

Pikselit vai prosentit?

• px antaa saman kaarevuuden elementin koosta riippumatta. Se sopii painikkeille, korteille ja syöttökentille: border-radius: 8px.
• % on suhteessa elementtiin: vaakasuorat säteet sen leveyteen ja pystysuorat sen korkeuteen. Arvo 50% muuttaa neliön ympyräksi ja suorakulmion ellipsiksi. Prosenttien ansiosta möykkymuodot skaalautuvat elementin mukana.

Pillerin muotoiselle painikkeelle käytä pikselisädettä, joka on vähintään puolet korkeudesta. Pilleri-esiasetus tekee juuri niin antamallesi laatikon koolle. Myös suuri arvo, kuten 999px, toimii.

Kun vierekkäisten säteiden summa ylittää niiden jakaman sivun pituuden, selaimet pienentävät kaikkia säteitä suhteessa, kunnes ne mahtuvat. Siksi kahden kahvan vetäminen toistensa ohi ei riko muotoa.

Möykkymuodot

Möykkyesiasetukset ja Satunnainen möykky käyttävät kahdeksaa prosenttiarvoa, joissa kunkin sivun kahden kahvan summa on 100 %. Kaaret kohtaavat silloin tarkasti, ja muoto näyttää pehmeältä kiveltä. Voit animoida kahden möykyn välillä CSS:n transition-ominaisuudella border-radius-arvoon, jolloin saat muotoa muuttavan vaikutelman.