Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

CSS border-radius գեներատոր անվճար

Վիզուալ կերպով նախագծեք կլորացված անկյուններ՝ յուրաքանչյուր անկյան անկախ կառավարմամբ: Աջակցում է X/Y շարահյուսությունն օրգանական blob ձևերի:

Աշխատում է անցանց՝ բեռնվելուց հետո
border-radius: 20px 20px 20px 20px;
Միավոր

Տարածված կիրառություններ

  • Օրգանական Բլոբի ՁևերՕգտագործեք էլիպտիկ X/Y շարահյուսությունը հերոս բաժինների և նկարազարդման համար եզակի բլոբի ձևեր ստեղծելու համար:
  • Քարտ և Տարա ԱնկյուններՍտանդարտ կլորացված անկյուններ քարտերի, տարաների և վահանակների համար ժամանակակից UI դիզայնում:
  • Անկար և Պրոֆիլային ՊատկերներՍտեղծեք պրոֆիլային պատկերների համար ճիշտ անկյունային ոճ. շրջանաձև, squircle կամ կլորացված քառակուսի:
  • Դեղեր, Պիտակներ և ՆշաններԿառուցեք խորհեղատ կլորացված դեղի կոճակներ, պիտակներ և նշաններ 9999 նախկինդ հետ:
  • Ասիմետրիկ Անկյունային ԴիզայներԽառցեք շառավղերը անկյունների վրա՝ ստեղծելու համար բաժանված, մակնիշով ճանաչելի քարտ և կոճակի ձևեր:

Ինչպես է այն աշխատում

border-radius գեներատորը լիովին աշխատում է դիտարկիչում — չկա սերվեր, չկա գրադարան, չկա վերբեռնում։ Այն կառուցում է CSS border-radius արժեքի տողը ուղղակիորեն JavaScript-ում՝ օգտագործելով React state և 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-ի վիզուալ կառուցիչ ուղիղ նախադիտմամբ, բազմաշերտ կուտակմամբ, գույնի ջրվեժով, inset անջատիչով ու մեկ սեղմումով պատճենով: Ներառում է Material, neumorphism ու փայլ կանխադրածներ:

Փորձեք այն
🟦

CSS Grid Գեներատոր

Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:

Փորձեք այն
↔️

CSS Flexbox Գեներատոր

Փորձեք flex ուղղությունը, փաթեթը, հիմնավորումը և հավասարեցումը իրական տարրերի վրա — և պատճեն անեք CSS-ը:

Փորձեք այն

Հաճախակի տրվող հարցեր