CodeKitHubMis see tööriist on?
border-radius on CSS omadus, mis ümardab elemendi nurki. Käsitsi kirjutatuna võtab see neli väärtust kindlas järjekorras — vasak-ülemine, parem-ülemine, parem-alumine, vasak-alumine —, mida on lihtne omavahel segamini ajada, eriti kui kõik neli nurka erinevad.
See tööriist eemaldab arvamise: liiguta liugurit, jälgi, kuidas nurk elavas eelvaates ümardub, ja loe täpne CSS genereeritud koodikastist. Üks lukustuslüliti vahetab ühtlase raadiuse (kõik neli nurka samad, kõige levinum juhtum) ja nelja iseseisva liuguri vahel orgaaniliste, asümmeetriliste kujude jaoks.
Miks seda kasutada?
- Elav eelvaade uueneb kohe, kui lohistad — pole vaja CSS-i muuta ja tulemust vaatamiseks värskendada.
- Ühe klõpsuga lukustus levinud „sama raadius igal nurgal” juhtumi jaoks; vabasta pillinuppude, kõnemullide ja vormikujuliste elementide jaoks.
- Väljastab lühikirjutuse ühe väärtusega vormis, kui kõik nurgad ühtivad, või täieliku neljaväärtuselise vormis, kui need ei ühti — mõlemal juhul kopeerimiseks-kleepimiseks valmis.
- Töötab täielikult su brauseris. Midagi, mida sisestad, ei saadeta kuhugi.
- Tasuta, registreerimist pole vaja, töötab mobiilis.
Kuidas kasutada
- Jäta „lukusta kõik nurgad” märgituks ja lohista mis tahes liugurit, et seada kogu kastile üks ühtlane raadius.
- Eemalda lukustus, et kontrollida iga nurka eraldi — kasulik pillikujuliste vormide, pisaratilkade ja asümmeetriliste kaartide jaoks.
- Jälgi, kuidas eelvaate kast iga liuguri kohandamisel elavalt uueneb.
- Kopeeri genereeritud CSS koodikastist ja kleebi see oma stiililehele.
Näide
Sisend
Vasak-ülemine: 40px, Parem-ülemine: 8px, Parem-alumine: 40px, Vasak-alumine: 8pxTulemus
border-radius: 40px 8px 40px 8px;Sellised mittevastavad vastasnurgad loovad lehe- või kroonlehekujulise siluetti — levinud efekt kaartide ja märgiste kujunduses.
px või % — kumba ühikut kasutada?
See generaator väljastab pikslivõredarvud, mis on enamiku kasutajaliidese töö jaoks õige vaikeväärtus: nupud, kaardid ja väljad, kus soovid fikseeritud, ennustatavat nurgaraadiust olenemata elemendi suurusest.
Protsendid käituvad erinevalt — need on suhtelised elemendi enda laiuse ja kõrgusega, seega ruudukujulisel elemendil annab 50% raadius täiusliku ringi, mitteruudukujulisel elemendil aga ellipsi. Kui soovid seda efekti (avatarid, konteineriga koos skaleeruvad vormikujud), võta genereeritud CSS ja vaheta px väärtused käsitsi % väärtuse vastu — näiteks border-radius: 50% muudab iga ruudukujulise kasti ringiks.
Levinud border-radius mustrid
- Ümar kaart: kõik nurgad võrdsed, umbes 8–16px kasutajaliidese komponentide jaoks.
- Pillinupp: sea raadius pooleks elemendi kõrgusest (või kasuta lihtsalt 9999px, mis kärbitakse täisulatuses pilliks olenemata kõrgusest).
- Ringikujuline avatar: border-radius: 50% ruudukujulisel (võrdse laiuse ja kõrgusega) elemendil.
- Kõnemull: kolm nurka ümardatud, üks nurk terav — sea kolm liugurit kõrgeks ja üks 0-le.
- Lehe-/kroonlehekujuline vorm: vastasnurgad sobitatud, kõrvutised nurgad erinevad — nt vasak-ülemine ja parem-alumine mõlemad suured, parem-ülemine ja vasak-alumine mõlemad väikesed.
Paaris varjuga
Ümardatud nurgad esinevad harva üksinda — kaardid ja nupud vajavad tavaliselt ka pisut varju sügavuse jaoks. Kasuta Box Shadow Generaatorit, et seadistada langevari, ja rakenda mõlemad genereeritud CSS-tükid samale elemendile.
Korduma kippuvad küsimused
Mis vahe on border-radius'el ja nurkade järjekorral?
CSS lühikirjutus järgib alati järjekorda vasak-ülemine, parem-ülemine, parem-alumine, vasak-alumine, päripäeva alates vasak-ülemisest nurgast. Selle tööriista neli liugurit on vastavalt märgistatud, nii et sa ei pea järjekorda kunagi ise meeles pidama.
Kas saan iga nurga jaoks kasutada erinevaid ühikuid?
Jah, päris CSS-is saad kombineerida px, %, em ja rem eri nurkade vahel, kuigi see on praktikas harv. See tööriist genereerib lihtsuse mõttes ühtlased px väärtused — vaheta mõni väärtus vajadusel oma stiililehes käsitsi % või mõne muu ühiku vastu, kui vajad segaühikuid.
Miks tekitab border-radius: 50% mõnikord ovaali, mitte ringi?
Kuna protsendid on iga telje suhtes eraldi suhtelised — horisontaalne raadius on protsent elemendi laiusest, vertikaalne raadius protsent selle kõrgusest. Ruudukujulisel elemendil (võrdne laius ja kõrgus) annab see täiusliku ringi; ristkülikul annab see ellipsi.
Kas border-radius mõjutab ka taustapilte ja piirjooni?
Jah — border-radius lõikab elemendi tausta, piirjoone ja (kaasaegsetes brauserites) selle box-shadow'i vastavalt ümardatud kujule. See ei lõika ülevoolavat lapssisu, kui sa ei sea vanemelemendile ka overflow: hidden.
Kas raadiuse suurusele on piirang?
Rangelt piirangut pole — kui raadius ületab poole elemendi laiusest või kõrgusest, kärbivad brauserid selle nii, et selle külje kaks kõverust kohtuvad täpselt keskel, mis on see, kuidas ruut muutub täiuslikuks ringiks või pillikujuliseks vormiks.
Kuidas teha pillikujuline vorm või täiuslik ring?
Pillikujulise (kapslikujulise) vormi jaoks sea raadius vähemalt pooleks elemendi kõrgusest — levinud nipp on border-radius: 9999px, mis toimib igal kõrgusel, kuna brauser piirab kõvera automaatselt. Täiuslik ring vajab kahte asja: võrdset laiust ja kõrgust ning border-radius: 50%.