Border Radiuse generaator

Ümardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.

Eelseadistused
Nurgad
Kõik nurgad
24px
CSS
Lohistage liugureid nurkade ümardamiseks.

Iga nurk joonistatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Kuidas toimivad neli nurka ning px vs %?

Neli liugurit vastavad päripäeva ülal-vasakule, ülal-paremale, all-paremale ja all-vasakule nurgale. Pikslites ümardatakse nurk kindla väärtuse võrra; protsentides ümardatakse seda kasti suhtes – horisontaalne protsent järgib laiust ja vertikaalne kõrgust, mistõttu 50% muudab ruudu ringiks.

Mida teeb elliptiline režiim?

Kui see on väljas, on iga nurk ühe raadiusega veerandring. Sisselülitamisel saab iga nurk eraldi horisontaalse ja vertikaalse raadiuse, mis võimaldab luua pehmeid, orgaanilisi „mulli“ (blob) kujundeid. Generaator kirjutab teie eest kahe väärtusega kaldkriipsuga vormi ja naaseb lühivormi juurde, kui nurgad on taas ümarad.

Kuidas luua täiuslikku ringi või kapslikuju?

Ühendage nurgad, lülituge protsentidele ja määrake väärtuseks 50%: ruudust saab ring. Kapslikujulise nupu puhul säilitage pikslid ja lohistage nurka nupu poolest kõrgusest kaugemale – küljed jäävad igasuguse laiuse juures täielikult ümaraks. Ringi (Circle) eelseadistus seadistab esimese variandi ühe klõpsuga.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.CSS Gridi generaatorMäärake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.VärvikonverterTeisendage värve HEX, RGB, HSL, HSV, CMYK ja LAB vahel — muutke mistahes välja ja ülejäänud uuenevad reaalajas.