ප්‍රධාන අන්තර්ගතයට පිවිසෙන්න
LibraTool logoLibraTool

නොමිලේ CSS Border Radius සකසන්නා

ඉලිප්සාකාර X/Y සින්ටෑක්ස් සමඟ කාබනික blob හැඩ සඳහා සෑම කෙළවරක්ම ස්වාධීනව පාලනය කරමින් රවුම් කළ කෙළවරු දෘශ්‍යාත්මකව නිර්මාණය කරන්න.

load වූ පසු offline ක්‍රියා කරයි
border-radius: 20px 20px 20px 20px;
ඒකක

පොදු භාවිත

  • ජෛව ස්පර්ශ හැඩතලhero කොටස් සහ චිත්‍ර සඳහා අද්විතීය blob හැඩ සෑදීමට elliptical X/Y වාක්‍ය ඛණ්ඩය භාවිතා කරන්න.
  • කඩ ප්‍රතිකර හරිනිනවීන UI නිර්මාණයේ කඩ, ධාරක සහ පුවරුවල සඳහා සම්මතයි rounded කෙළවරු।
  • Avatar සහ Profile Picture හැඩතලProfile තිතුවල සඳහා නිවැරදි කෙළවර ශෛලි සෑදීම: වෘත්තාකාර, squircle, හෝ rounded square.
  • Pills, Tags සහ Badges9999 preset සමඟ සම්පූර්ණ rounded pill බොත්තම්, tags සහ badges තෑගි කරන්න.
  • Asymmetric කෙළවර නිර්මාණRadii කෙළවරු පුරා මිශ්‍රණ බ්‍රාන්ඩ-recognizable කඩ සහ බොත්තම් සෑදීම සඳහා.

එය ක්‍රියා කරන්නේ කෙසේද

border-radius උත්පාදකය සම්පූර්ණයෙන්ම බ්‍රවුසරයේ ක්‍රියාත්මක වේ — සර්වරයක්, පුස්තකාලයක්, උඩුගත කිරීමක් නැත. එය React state සහ useMemo භාවිතයෙන් CSS border-radius අගය string එක කෙලින්ම JavaScript වලින් ගොඩනගා, බ්‍රවුසරයේම CSS එන්ජිම හැඩය තථ්‍ය-කාලීනව නිරූපණය කරන ලෙස සජීවී div element එකක inline style එකක් ලෙස යොදයි.

  1. 1
    Sliders state ලියයි
    එක් එක් range ආදානය අටෙන් එක් සංඛ්‍යාත්මක state විචල්‍යයකට ලියයි — elliptical ප්‍රකාරය සඳහා තිරස් කෙළවර අරය හතරක් සහ සිරස් හතරක්. Unified ප්‍රකාරය සියල්ල අටම එකවර සෑම අගයක්ම සමමුහුර්ත කරන setAll helper එකක් හරහා තනි slider එකකට හකුළනු ලැබේ.
  2. 2
    useMemo CSS අගය එකලස් කරයි
    useMemo hook එකක් ඕනෑම කෙළවර අගයක්, ඒකකයක් (px හෝ %), හෝ elliptical toggle එකක් වෙනස් වන සෑම විටම border-radius string එක නැවත ගණනය කරයි. සම්මත ප්‍රකාරයේදී එය හතරක-අගය shorthand එකක් නිපදවයි; elliptical සක්‍රියව ඇති විට, එය සම්පූර්ණ අටක-අගය syntax සඳහා slash separator එකක් එකතු කරයි — උදා. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    බ්‍රවුසර CSS එන්ජිම පෙරදසුන නිරූපණය කරයි
    ගණනය කළ string එක සරල div element එකක inline borderRadius style එකක් ලෙස සකසනු ලැබේ. බ්‍රවුසරයේ layout එන්ජිම සියලුම නිරූපණය කරයි — canvas එකක්, SVG එකක්, third-party ඇඳීමේ කේතයක් නැත.
  4. 4
    Clipboard API ප්‍රතිදානය පිටපත් කරයි
    Copy ක්ලික් කිරීම තෝරාගත් format toggle එක අනුව CSS ප්‍රකාශනය (border-radius: ...;) හෝ සමානාත්මක Tailwind arbitrary-value class එක (rounded-[...]) සමඟ navigator.clipboard.writeText ඇමතුම් කරයි.

සම්බන්ධ මෙවලම්

🎨

CSS Box Shadow සකසන්නා

සජීව පෙරදසුන, බහු-ස්ථර ස්ථාපනය, වර්ණ picker, inset toggle සහ එක් ක්ලික් පිටපත් කිරීම සහිත CSS box-shadow දෘශ්‍ය නිර්මාතෘ. Material, neumorphism සහ glow presets ඇතුළත් ය.

උත්සාහ කරන්න
🟦

CSS ග්‍රිඩ් උත්පාදකය

CSS grid ඉතිරිවීමින් නිර්මාණ කරන්න — tracks, units සහ gaps — සහ generated CSS සහ HTML පිටපත් කරන්න।

උත්සාහ කරන්න
↔️

CSS ෆ්ලෙක්ස්බොක්ස් උත්පාදකය

flex direction, wrap, justify සහ align ට විෂ්‍යය කරන්න ලයිව් items වලට — සහ CSS පිටපත් කරන්න।

උත්සාහ කරන්න

නිතර අසන ප්‍රශ්න