LibraTool logoLibraTool

Бесплатен Генератор на CSS border-radius

Визуелно дизајнирајте заоблени агли со независна контрола на секој агол. Поддржува елиптична X/Y синтакса за органски форми.

Работи офлајн откако ќе се вчита
border-radius: 20px 20px 20px 20px;
Единица

Како функционира

Генераторот на border-radius работи целосно во прелистувачот — нема сервер, нема библиотека, и нема прикачување. Ја гради CSS вредноста border-radius директно во JavaScript користејќи React состојба и useMemo, потоа ја применува како вграден стил на жив div елемент за самиот CSS механизам на прелистувачот да ја исцрта формата во реално време.

  1. 1
    Лизгачите запишуваат состојба
    Секој влез со опсег запишува во една од осум нумерички променливи на состојба — четири хоризонтални радиуси на агли и четири вертикални за елиптичен режим. Обединетиот режим ги собира сите осум во единствен лизгач преку помошна функција setAll која ги синхронизира сите вредности одеднаш.
  2. 2
    useMemo ја составува CSS вредноста
    Кука useMemo ја препресметува низата border-radius секогаш кога ќе се промени вредноста на некој агол, единицата (px или %), или преклопникот за елиптичен режим. Во стандарден режим произведува кратенка со четири вредности; со вклучено елиптично, додава коса црта за целосна синтакса со осум вредности — на пр. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS механизмот на прелистувачот го исцртува прегледот
    Пресметаната низа се поставува како вграден стил borderRadius на обичен div елемент. Механизмот за распоред на прелистувачот врши целото исцртување — нема canvas, нема SVG, и нема код за цртање од трета страна.
  4. 4
    Clipboard API го копира излезот
    Кликнувањето на „Копирај“ повикува navigator.clipboard.writeText со или CSS декларацијата (border-radius: ...;) или еквивалентната Tailwind класа со произволна вредност (rounded-[...]), во зависност од избраниот преклопник за формат.

Поврзани алатки

🎨

Генератор на CSS box-shadow

Визуелен алат за CSS box-shadow со преглед во живо, наредување повеќе слоеви, бирач на бои, вклучување на внатрешна сенка и копирање со еден клик. Вклучува претходно поставени опции за Material, неуморфизам и сјај.

Пробајте го
🟦

Генератор на CSS Grid

Визуелно дизајнирајте CSS grid — колони, редови, единици и празнини — и копирајте го генерираниот CSS и HTML.

Пробајте го
↔️

Генератор на CSS Flexbox

Експериментирајте со насока, пренесување, порамнување и усогласување на елементи во живо — и копирајте го CSS-от.

Пробајте го

Најчесто поставувани прашања