Border Radius generátor

Kerekítse le a sarkokat csúszkákkal, hozzon létre organikus amőba alakzatokat az elliptikus móddal, és másolja ki azonnal a CSS-kódot.

Előbeállítások
Sarkok
Minden sarok
24px
CSS
Húzza a csúszkákat a sarkok lekerekítéséhez.

Minden sarok kirajzolása közvetlenül a böngészőjében történik. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire.

GYIK

Hogyan működik a négy sarok, illetve a px és a % közötti különbség?

A négy csúszka az óramutató járásával megegyező irányban a bal felső, jobb felső, jobb alsó és bal alsó sarkoknak felel meg. Képpontban (px) megadva a sarok fix mértékben kerekedik le; százalékban (%) a doboz méretéhez képest – a vízszintes százalék a szélességet, a függőleges százalék a magasságot követi, így az 50% a négyzetet körré alakítja.

Mire való az elliptikus mód?

Kikapcsolt állapotban minden sarok egyetlen sugárral rendelkező negyedkör. Ha bekapcsolja, minden sarok külön vízszintes és függőleges sugarat kap – így hozhat létre lágy, organikus „amőba” (blob) alakzatokat. A generátor automatikusan megírja a két értékből álló, perjellel elválasztott formát, és visszaáll a rövid formára, amint a sarkok újra szabályos körívekké válnak.

Hogyan készíthetek tökéletes kört vagy kapszula alakot?

Kapcsolja össze a sarkokat, váltson százalékra (%), és állítson be 50%-ot: a négyzetből ekkor kör lesz. Kapszula alakú gombhoz hagyja meg a képpontot (px), és húzza az egyik sarkot a gomb magasságának felén túlra – az oldalak így bármilyen szélességnél teljesen lekerekítettek maradnak. A Kör előbeállítás egyetlen kattintással beállítja az első esetet.

CSS Cubic Bezier generátorHúzza a két fogantyút az átmeneti görbe formálásához, figyelje a pont mozgását a lineárissal szemben, és másolja ki a cubic-bezier() értéket.Box Shadow generátorHúzza a csúszkákat a box-shadow alakításához, halmozzon fel rétegeket a mélységért, és másolja ki azonnal a kész CSS-kódot.Színátmenet generátorHozzon létre lineáris, radiális vagy kúpos színátmenetet, adjon hozzá színpontokat, állítsa be az irányt, és másolja ki a CSS-t egyetlen kattintással.Flexbox generátorÁllítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.CSS Grid generátorÁllítsa be az oszlopokat és sorokat, húzza végig a kurzort a cellákon az elemek elhelyezéséhez, és másolja ki a grid CSS-t a hozzá tartozó HTML-lel egyetlen kattintással.CSS clamp() kalkulátorAdja meg a kis és nagy képernyőkhöz tartozó méretet, és kapjon egy folyékony clamp() értéket, amely zökkenőmentesen skálázódik a kettő között – betűméretekhez, belső és külső margókhoz vagy résekhez.SzínkonvertálóKonvertáljon színeket HEX, RGB, HSL, HSV, CMYK és LAB formátumok között – szerkesszen bármely mezőt, és a többi automatikusan frissül.