CSS හි සමාන්තර වටකුරු: නෙස්ට් කරුණු රවුම් කෝණ වල වැරදි හා නිවැරදි පිළිවෙත

ඔබේ වෙබ් පිටුවේ කාඩ්පතක් 16px රවුම් කෝණයකින් සකස් කර, එහි ඡායා රූපයද ඒකම තරමට (16px) වටකුරු කරන්නේ නම්, ඒ දෙක බලන විට කෝණ අතරේ කුඩා ඉඩක් ඇති බව ඔබට හැඟේද? එය අසමත් නොවෙයි – එය ගණිතමය වැරදි නිසා සිදුවේ.

අභ්‍යන්තර කාඩ්පතේ රවුම් කෝණය, පිටත කාඩ්පතේ රවුම් කෝණයට සමාන දුරකින් (gap) වෙන් කර තිබිය යුතුය. එම ගැලපුම inner radius = outer radius − gap ලෙස සරලව සාරාංශ කළ හැක. මෙහි gap කියන්නේ පිටත කොටසේ border‑width එක සහ padding එක එකතුවයි.

ගණිතමය පැහැදිළිය සඳහා, පිටත කොටසේ වම්‑ඉහළ කෝණය (0,0) ස්ථානයේ R රවුම් කෝණයක් ඇතැයි ගනිමු. එහි කෝණ වක්‍රය (R,R) කේන්ද්‍රයෙන් අර්ධවෘත්තයක් වේ. අභ්‍යන්තර කොටස p පික්සෙල් දුරින් ඇතුළත් කර, r රවුම් කෝණයක් ලබා දුන්නේ නම්, එහි කේන්ද්‍රය (p+r, p+r) වේ. මේ දෙක එකම ස්ථානයේ තිබෙන්නේ p+r = R වන විටයි, එනම් r = R − p. එම නිසා ගැලපුම තිරස්ව පවතී.

CSS තුළ මෙම සූත්‍රය භාවිතා කිරීම ඉතා පහසුයි. custom properties (වෙරියබල්) භාවිතා කර, padding සහ radius එකක් නිර්වචනය කර, අභ්‍යන්තර රූපයට calc(var(--radius) - var(--pad)) ලෙස ගණනය කරමු. padding radius‑වට වඩා වැඩි වුවහොත් calc() නෙගටීව් ප්‍රමාණයක් ලබා දෙනු ඇත. නෙගටීව් border‑radius වලංගු නොවන බැවින්, CSS නීතිය අනුව එය අහෝසි කරයි. ඒ නිසා max(0px, calc(...)) භාවිතයෙන් නෙගටීව් වීම වැළැක්විය යුතුය.

බෝර්ඩරය (border) ඇතුළත් කරන විට, border‑width එකත් gap එකට එකතු කරගත යුතුය. එසේ නොකළහොත් 1px‑ක වරදක් පවා දෘශ්‍යම පරතරයක් ඇති කරයි. උදාහරණයක් ලෙස:

.card { --radius: 16px; --border: 1px; --pad: 12px; border: var(--border) solid #d4d4d8; padding: var(--pad); border-radius: var(--radius); } .card > .inner { border-radius: max(0px, calc(var(--radius) - var(--border) - var(--pad))); }

සමහර වෙබ් අඩවි වල horizontal padding වඩා vertical padding වැඩි වීම නිසා, එකම radius අගයක් භාවිතා කළහොත් කෝණ දෙකම සමාන්තර නොවේ. එම අවස්ථාවලදී horizontal / vertical ලෙස දෙකම වෙන වෙනම සකස් කළ හැක. CSS shorthand එක slash (/) භාවිතයෙන් border-radius: horz / vert ලෙස ලියන්න.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

• ඉගෙනුම් කාර්යක්ෂමතාව: සිසුන්ට CSS ගණිතය තේරුම් ගැනීමට ප්‍රායෝගික උදාහරණයක්.
• ඩිවෙලොපර් කුසලතා: නිවැරදි border‑radius සැකසීමෙන් UI consistency වැඩි වේ, පාරිභෝගික අත්දැකීම උසස් වේ.
• ව්‍යාපාරික වාසි: වෙබ් අඩවිවල visual glitches අඩු කර, පාරිභෝගික විශ්වාසය වැඩි කරයි.
• ඩිසයින් සංග්‍රහ: Design tokens (radius, padding) එකක් ලෙස නියම කිරීමෙන් පද්ධතියේ maintainability ඉහළ යයි.

අවසානයට, CSS හි concentric border‑radius නීතිය අනුගමනය කිරීමෙන් ඔබේ වෙබ් අඩවියේ රවුම් කෝණයන් සම්පූර්ණ සමාන්තරව පෙනෙනු ඇත. මෙය කුඩා විස්තරයක් වුවද, UI ගුණාත්මකභාවය හා කාර්යක්ෂම සංවර්ධනය සඳහා විශාල බලපෑමක් ඇති කරයි.