Border-radius framleiðandi

Hvernig á að nota border-radius framleiðandann

1. Dragðu punktana á köntum forskoðunarinnar. Hver litaður punktur stillir lárétta radíusinn á einu horni; þegar hakað er í Sporöskjulaga horn (8 gildi) stilla hvítu punktarnir lóðréttu radíusana.
2. Eða sláðu inn nákvæm gildi undir Horn: Efst til vinstri, Efst til hægri, Neðst til hægri og Neðst til vinstri, hvert með reit fyrir Lárétt og Lóðrétt.
3. Veldu Eining: % (prósent af kassanum) eða px (pixlar). Þegar skipt er um einingu eru núverandi gildi umreiknuð, þannig að lögunin helst sú sama.
4. Stilltu Breidd kassa (px) og Hæð kassa (px) þannig að þær passi við þáttinn þinn og notaðu Öll horn til að ávala öll horn í einu.
5. Prófaðu Forstillingar (Ávalt, Pilla, Hringur, Laufblað, Dropi, Egg, Miði og þrjár klessur) eða smelltu á Tilviljunarkennd klessa til að fá lífræna lögun.
6. Hakaðu í Einstakir eiginleikar ef þú vilt frekar fjórar border-*-radius yfirlýsingar og afritaðu síðan CSS-kóði með Afrita.

Lyklaborð: settu punkt í fókus og notaðu örvalyklana til að breyta radíusnum um eitt þrep (10 með Shift).

Syntax border-radius

border-radius tekur eitt til fjögur gildi, í röðinni efst til vinstri, efst til hægri, neðst til hægri, neðst til vinstri. Eins og með spássíur eru gildi sem vantar tekin frá gagnstæðu horni: border-radius: 10px 20px ávalar efst til vinstri og neðst til hægri um 10px og hin tvö um 20px. Tólið skrifar alltaf stystu jafngildu útgáfuna.

Hvert horn er í raun fjórðungur af sporbaug með tveimur radíusum. Skástrik aðgreinir lárétta radíusa frá lóðréttum og gefur allt að átta gildi:

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

Fyrir skástrikið: láréttir radíusar hornanna fjögurra. Eftir það: lóðréttu radíusarnir. Þegar báðir listar eru eins er skástrikshlutinn felldur niður.

Pixlar eða prósentur?

• px gefur sömu sveigju hvað sem stærð þáttarins líður. Það er rétt val fyrir hnappa, spjöld og innsláttarreiti: border-radius: 8px.
• % er hlutfallslegt við þáttinn: láréttir radíusar miðast við breiddina og lóðréttir við hæðina. 50% breytir ferningi í hring og ferhyrningi í sporbaug. Prósentur gera klessulögun skalanlega með þættinum.

Fyrir pilluhnapp skaltu nota pixlaradíus sem er að minnsta kosti helmingur hæðarinnar. Forstillingin Pilla gerir einmitt það fyrir kassastærðina sem þú slóst inn; mjög stórt gildi eins og 999px virkar líka.

Þegar aðliggjandi radíusar eru samanlagt stærri en hliðin sem þeir deila minnka vafrar alla radíusa í hlutfalli þar til þeir passa. Þess vegna skemmist lögunin ekki þótt þú dragir tvo punkta framhjá hvor öðrum.

Klessulögun

Klessuforstillingarnar og Tilviljunarkennd klessa nota átta prósentur þar sem punktarnir tveir á hverri hlið eru samanlagt 100%. Ferlarnir mætast þá nákvæmlega og lögunin lítur út eins og slétt steinvala. Þú getur látið klessur renna saman með CSS transition á border-radius til að fá „morphing“-áhrif.