CodeKitHubKas yra šis įrankis?
border-radius yra CSS savybė, suapvalinanti elemento kampus. Rašant ranka reikia keturių reikšmių fiksuota tvarka — viršutinis kairysis, viršutinis dešinysis, apatinis dešinysis, apatinis kairysis — kurią lengva sumaišyti, ypač kai visi keturi kampai skiriasi.
Šis įrankis pašalina spėliojimą: perkelkite slankiklį, stebėkite, kaip kampas suapvalėja gyvoje peržiūroje, ir perskaitykite tikslų CSS iš sugeneruoto kodo langelio. Vienas užrakto perjungiklis leidžia rinktis tarp vienodo spindulio (visi keturi kampai vienodi, dažniausias atvejis) ir keturių nepriklausomų slankiklių organinėms, asimetriškoms formoms.
Kodėl jį naudoti?
- Peržiūra gyvai atsinaujina akimirksniu jums vilkinant — nereikia redaguoti CSS ir atnaujinti puslapio, kad pamatytumėte rezultatą.
- Vieno paspaudimo užraktas dažnam atvejui "vienodas spindulys kiekviename kampe"; atrakinkite piliulės formos mygtukams, kalbos debesėliams ir dėmių formoms.
- Sugeneruoja trumpąją vienos reikšmės formą, kai visi kampai sutampa, arba pilną keturių reikšmių formą, kai jie skiriasi — bet kuriuo atveju paruošta kopijuoti ir įklijuoti.
- Veikia visiškai jūsų naršyklėje. Niekas, ką įvedate, niekur nesiunčiama.
- Nemokama, be registracijos, veikia mobiliajame įrenginyje.
Kaip naudoti
- Palikite pažymėtą "užrakinti visus kampus" ir vilkite bet kurį slankiklį, kad nustatytumėte vienodą spindulį visam langeliui.
- Nuimkite užraktą, kad valdytumėte kiekvieną kampą nepriklausomai — naudinga piliulės formoms, lašo formoms ir asimetriškoms kortelėms.
- Stebėkite, kaip peržiūros langelis atnaujinamas gyvai, jums koreguojant kiekvieną slankiklį.
- Nukopijuokite sugeneruotą CSS iš kodo langelio ir įklijuokite jį į savo stilių lapą.
Pavyzdys
Įvestis
Viršutinis kairysis: 40px, viršutinis dešinysis: 8px, apatinis dešinysis: 40px, apatinis kairysis: 8pxIšvestis
border-radius: 40px 8px 40px 8px;Nesutampantys priešingi kampai, kaip šiame pavyzdyje, sukuria lapo ar žiedlapio siluetą — dažnas efektas kortelių ir ženkliukų dizaine.
px ar % — kokį vienetą naudoti?
Šis generatorius pateikia pikselių reikšmes — tai teisingas numatytasis pasirinkimas daugumai UI darbų: mygtukams, kortelėms ir įvesties laukams, kur norite fiksuoto, nuspėjamo kampo spindulio nepriklausomai nuo elemento dydžio.
Procentai veikia kitaip — jie yra santykiniai elemento paties pločio ir aukščio atžvilgiu, todėl 50% spindulys kvadratiniame elemente sukuria tobulą apskritimą, o ne kvadratiniame — elipsę. Jei norite tokio efekto (avatarai, dėmių formos, besiskalojančios su konteineriu), paimkite sugeneruotą CSS ir ranka pakeiskite px reikšmes į % reikšmę — pavyzdžiui, border-radius: 50% bet kokį kvadratinį langelį paverčia apskritimu.
Dažni border-radius šablonai
- Suapvalinta kortelė: visi kampai vienodi, maždaug 8–16px UI komponentams.
- Piliulės formos mygtukas: nustatykite spindulį lygų pusei elemento aukščio (arba tiesiog naudokite 9999px, kuris apriboja iki pilnos piliulės nepriklausomai nuo aukščio).
- Apskritimo avataras: border-radius: 50% ant kvadratinio (vienodo pločio ir aukščio) elemento.
- Kalbos debesėlis: trys kampai suapvalinti, vienas smailus — nustatykite tris slankiklius aukštus, o vieną į 0.
- Lapo / žiedlapio forma: priešingi kampai sutampa, gretimi kampai skiriasi — pvz., viršutinis kairysis ir apatinis dešinysis abu dideli, viršutinis dešinysis ir apatinis kairysis abu maži.
Derinimas su šešėliu
Suapvalinti kampai retai atsiranda vieni — kortelėms ir mygtukams paprastai reikia ir šiek tiek šešėlio gyliui pasiekti. Naudokite Box Shadow generatorių, kad sukurtumėte kritimo šešėlį, ir pritaikykite abu sugeneruotus CSS aprašus tam pačiam elementui.
Dažniausiai užduodami klausimai
Koks skirtumas tarp border-radius ir kampų tvarkos?
CSS trumpoji forma visada seka viršutinis kairysis, viršutinis dešinysis, apatinis dešinysis, apatinis kairysis tokia tvarka, pagal laikrodžio rodyklę pradedant nuo viršutinio kairiojo. Šio įrankio keturi slankikliai pažymėti taip pat, todėl jums niekada nereikės pačiam prisiminti tvarkos.
Ar galiu naudoti skirtingus vienetus kiekvienam kampui?
Taip, tikrame CSS galite maišyti px, %, em ir rem tarp kampų, nors praktikoje tai reta. Šis įrankis paprastumui sugeneruoja vienodas px reikšmes — pakeiskite bet kurią atskirą reikšmę į % ar kitą vienetą tiesiogiai savo stilių lape, jei reikia mišrių vienetų.
Kodėl border-radius: 50% kartais sukuria ovalą, o ne apskritimą?
Nes procentai yra santykiniai kiekvienai ašiai nepriklausomai — horizontalus spindulys yra procentinė elemento pločio dalis, vertikalus spindulys — procentinė jo aukščio dalis. Kvadratiniame elemente (vienodas plotis ir aukštis) tai sukuria tobulą apskritimą; stačiakampyje — elipsę.
Ar border-radius veikia ir su fono paveikslėliais bei rėmeliais?
Taip — border-radius apkerpa elemento foną, rėmelį ir (modernose naršyklėse) jo box-shadow pagal suapvalintą formą. Jis neapkerpa viršijančio vaikinio turinio, nebent taip pat nustatote overflow: hidden tėviniame elemente.
Ar yra apribojimas, koks didelis gali būti spindulys?
Griežto apribojimo nėra — jei spindulys viršija pusę elemento pločio ar aukščio, naršyklės jį apriboja taip, kad dvi tos pusės kreivės susitiktų lygiai viduryje, ir taip kvadratas tampa tobulu apskritimu ar piliulės forma.
Kaip sukurti piliulės formą ar tobulą apskritimą?
Piliulės (kapsulės) formai nustatykite spindulį bent pusei elemento aukščio — dažnas triukas yra border-radius: 9999px, kuris veikia bet kokiame aukštyje, nes naršyklė automatiškai apriboja kreivę. Tobulam apskritimui reikia dviejų dalykų: vienodo pločio ir aukščio bei border-radius: 50%.