CSS مولد نصف قطر الحدود مجانًا

كيف يعمل

يعمل مولّد 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-[...])، حسب مفتاح الصيغة المختار.

أدوات ذات صلة