CodeKitHubKaj je to orodje?
border-radius je lastnost CSS, ki zaokroži vogale elementa. Ročno zapisana zahteva štiri vrednosti v fiksnem vrstnem redu — zgoraj levo, zgoraj desno, spodaj desno, spodaj levo — kar je enostavno pomešati, še posebej ko se štirje vogali razlikujejo.
To orodje odpravi ugibanje: premakni drsnik, opazuj, kako se vogal zaokroži v predogledu v živo, in preberi natančno kodo CSS iz generiranega polja s kodo. En sam preklop zaklepa se prestavi med enotnim polmerom (vsi štirje vogali enaki, najpogostejši primer) in štirimi neodvisnimi drsniki za organske, asimetrične oblike.
Zakaj ga uporabiti?
- Predogled v živo se posodablja takoj med vlečenjem — brez urejanja CSS in osveževanja za ogled rezultata.
- En klik za zaklep pri pogostem primeru 'enak polmer na vsakem vogalu'; odkleni za gumbe v obliki kapsule, oblačke za govor in oblike mehurčkov.
- Izpiše skrajšano obliko z eno vrednostjo, kadar se vsi vogali ujemajo, ali polno obliko s štirimi vrednostmi, kadar se ne — v obeh primerih pripravljeno za kopiranje in lepljenje.
- Deluje v celoti v tvojem brskalniku. Nič od tega, kar vneseš, se nikamor ne pošilja.
- Brezplačno, brez registracije, deluje na mobilnih napravah.
Kako ga uporabljati
- Pusti 'zakleni vse vogale' obkljukano in povleci katerikoli drsnik, da nastaviš en enoten polmer za celo škatlo.
- Odkljukaj zaklep, da nadzoruješ vsak vogal neodvisno — uporabno za oblike kapsul, solznih kapljic in asimetrične kartice.
- Opazuj, kako se škatla v predogledu posodablja v živo, ko prilagajaš vsak drsnik.
- Kopiraj generirano kodo CSS iz polja s kodo in jo prilepi v svojo slogovno datoteko.
Primer
Vnos
Zgoraj levo: 40px, zgoraj desno: 8px, spodaj desno: 40px, spodaj levo: 8pxRezultat
border-radius: 40px 8px 40px 8px;Neujemajoči si nasprotni vogali, kot tukaj, ustvarijo siluet lista ali cvetnega lista — pogost učinek pri oblikovanju kartic in značk.
px ali % — katero enoto naj uporabim?
Ta generator izpiše vrednosti v pikslih, kar je pravi privzeti izbor za večino dela z uporabniškim vmesnikom: gumbi, kartice in vnosna polja, kjer želiš fiksen, predvidljiv polmer vogala ne glede na velikost elementa.
Odstotki se obnašajo drugače — relativni so na širino in višino elementa samega, zato polmer 50 % na kvadratnem elementu ustvari popoln krog, na nepravokotnem elementu pa elipso. Če želiš ta učinek (profilne slike, oblike mehurčkov, ki se skalirajo z vsebnikom), vzemi generirano kodo CSS in ročno zamenjaj vrednosti px z vrednostjo % — na primer border-radius: 50% spremeni katerokoli kvadratno škatlo v krog.
Pogosti vzorci border-radius
- Zaobljena kartica: vsi vogali enaki, približno 8–16px za komponente uporabniškega vmesnika.
- Gumb v obliki kapsule: nastavi polmer na polovico višine elementa (ali preprosto uporabi 9999px, ki se vedno omeji na polno kapsulo ne glede na višino).
- Krožna profilna slika: border-radius: 50% na kvadratnem (enaka širina in višina) elementu.
- Oblaček za govor: trije vogali zaobljeni, en oster — nastavi tri drsnike visoko in enega na 0.
- Oblika lista/cvetnega lista: ujemajoči nasprotni vogali, različni sosednji vogali — npr. zgoraj levo in spodaj desno oba veliko, zgoraj desno in spodaj levo oba majhna.
Kombiniranje s senco
Zaobljeni vogali se redko pojavljajo sami — kartice in gumbi običajno potrebujejo tudi malo sence za globino. Uporabi generator box-shadow, da nastaviš senco padanja, in obe deli generirane kode CSS uporabi na istem elementu.
Pogosta vprašanja
Kakšna je razlika med border-radius in vrstnim redom vogalov?
Skrajšava CSS vedno sledi vrstnemu redu zgoraj levo, zgoraj desno, spodaj desno, spodaj levo, v smeri urinega kazalca, začenši zgoraj levo. Štirje drsniki tega orodja so označeni skladno s tem, tako da ti nikoli ni treba pomniti vrstnega reda.
Ali lahko za vsak vogal uporabim drugo enoto?
Da, v pravem CSS lahko mešaš px, %, em in rem med vogali, čeprav je to v praksi redko. To orodje zaradi enostavnosti generira enotne vrednosti px — vsako posamezno vrednost lahko po potrebi zamenjaš na % ali drugo enoto neposredno v svoji slogovni datoteki.
Zakaj border-radius: 50% včasih ustvari oval namesto kroga?
Ker so odstotki relativni na vsako os posebej — vodoravni polmer je odstotek širine elementa, navpični polmer pa odstotek njegove višine. Na kvadratnem elementu (enaka širina in višina) to ustvari popoln krog; na pravokotniku ustvari elipso.
Ali border-radius deluje tudi na slikah v ozadju in okvirjih?
Da — border-radius obreže ozadje elementa, okvir in (v sodobnih brskalnikih) njegovo box-shadow v zaobljeno obliko. Ne obreže vsebine podrejenih elementov, ki presega, razen če na nadrejenem elementu nastaviš tudi overflow: hidden.
Ali obstaja omejitev, kako velik je lahko polmer?
Ni trde omejitve — če polmer presega polovico širine ali višine elementa, ga brskalniki omejijo tako, da se ukrivljenosti na tisti strani natanko srečata na sredini, kar je način, kako se kvadrat spremeni v popoln krog ali obliko kapsule.
Kako naredim obliko kapsule ali popoln krog?
Za obliko kapsule (kapsula) nastavi polmer na vsaj polovico višine elementa — pogost trik je border-radius: 9999px, ki deluje pri kateri koli višini, ker brskalnik samodejno omeji ukrivljenost. Popoln krog potrebuje dvoje: enako širino in višino, plus border-radius: 50%.