Border-radius generaator

Kuidas border-radius generaatorit kasutada

1. Lohista eelvaate servadel olevaid punkte. Iga värviline punkt määrab nurga horisontaalse raadiuse; kui valik Elliptilised nurgad (8 väärtust) on märgitud, määravad valged punktid vertikaalsed raadiused.
2. Või sisesta täpsed väärtused jaotises Nurgad: Üleval vasakul, Üleval paremal, All paremal ja All vasakul, igaühel on väli Horisontaalne ja väli Vertikaalne.
3. Vali Ühik: % (protsent kastist) või px (pikslid). Ühiku vahetamine teisendab praegused väärtused, nii et kuju jääb samaks.
4. Sea Kasti laius (px) ja Kasti kõrgus (px) vastavaks oma elemendile ning kasuta valikut Kõik nurgad, et ümardada kõik nurgad korraga.
5. Proovi Eelseadeid (Ümardatud, Pill, Ring, Leht, Tilk, Muna, Pilet ja kolm plönni) või klõpsa nupul Juhuslik plönn, et saada orgaaniline kuju.
6. Märgi Pikad omadused, kui eelistad nelja eraldi border-*-radius deklaratsiooni, ning kopeeri CSS-kood nupuga Kopeeri.

Klaviatuur: fookusta punkt ja vajuta nooleklahve, et muuta selle raadiust ühe sammu võrra (Shiftiga 10 sammu).

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Border-radius süntaks

border-radius võtab ühe kuni neli väärtust järjekorras üleval vasakul, üleval paremal, all paremal, all vasakul. Nagu ääriste puhul, võetakse puuduvad väärtused vastasnurgast: border-radius: 10px 20px ümardab üleval vasaku ja all parema nurga 10 pikslit ning ülejäänud kaks 20 pikslit. Tööriist kirjutab alati lühima samaväärse kuju.

Tegelikult on iga nurk veerand ellipsist, millel on kaks raadiust. Kaldkriips eraldab horisontaalsed raadiused vertikaalsetest, mis annab kuni kaheksa väärtust:

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

Enne kaldkriipsu on nelja nurga horisontaalsed raadiused, pärast seda vertikaalsed. Kui mõlemad loendid on võrdsed, jäetakse kaldkriipsu osa ära.

Pikslid või protsendid?

• px annab sama kõvera sõltumata elemendi suurusest. See on õige valik nuppudele, kaartidele ja sisestusväljadele: border-radius: 8px.
• % on elemendi suhtes: horisontaalsed raadiused laiuse ja vertikaalsed kõrguse suhtes. 50% muudab ruudu ringiks ja ristküliku ellipsiks. Just protsendid võimaldavad plönnikujudel koos elemendiga skaleeruda.

Pillikujulise nupu jaoks kasuta pikslites raadiust, mis on vähemalt pool kõrgusest. Eelseade Pill teeb täpselt seda sisestatud kasti suuruse jaoks; sobib ka suur väärtus, näiteks 999px.

Kui kõrvuti asuvate raadiuste summa ületab nende ühise külje pikkuse, vähendavad brauserid kõiki raadiusi proportsionaalselt, kuni need ära mahuvad. Seetõttu ei lõhu kuju ära ka kahe punkti üle teineteise lohistamine.

Plönnikujud

Plönni eelseaded ja Juhuslik plönn kasutavad kaheksat protsenti, kus iga külje kaks punkti annavad kokku 100%. Kõverad sulanduvad siis täpselt kokku ja kuju näeb välja nagu sile kivike. Kahe plönni vahel saab animeerida CSS-i transition abil omadusel border-radius, et saada „sulava“ kuju efekt.