مولّد نصف قطر الحدود

كيف تعمل

أربعة أشرطة تمرير، واحد لكل زاوية، كل منها يُحدّث الناتج فورًا. مع تفعيل «ربط جميع الزوايا»، يؤدي تحريك أي شريط إلى نسخ قيمته إلى الأشرطة الثلاثة الأخرى قبل إعادة بناء كود CSS. تُجمَّع القيم بالترتيب الذي يستخدمه CSS فعليًا، باتجاه عقارب الساعة بدءًا من أعلى اليسار. نفس هذه السلسلة تُكتب مباشرة في خاصية style.borderRadius لعنصر المعاينة، فهي ليست تقريبًا للناتج، بل هي فعليًا كود CSS الذي تنسخه.

تستخدم هذه الأداة البكسل، والبكسل يتصرف بشكل مختلف عن النسب المئوية: border-radius: 50% على مستطيل يُحسب لكل محور على حدة فيعطي شكلًا بيضاويًا، بينما قيمة كبيرة بالبكسل مثل 9999px تعطي شكل الحبة الذي يبحث عنه معظم الناس. كذلك تقصّ المواصفة نصف الأقطار المتداخلة: عندما يتجاوز مجموع أنصاف الأقطار على جانبٍ ما طول ذلك الجانب، يُقلّصها المتصفح تناسبيًا.

الأداة بأكملها بضع عشرات من أسطر جافاسكريبت تعمل في هذه الصفحة. تنتقل القيم من DOM إلى المعاينة وعودةً إلى مربع الناتج دون أي نشاط شبكة، ويمكنك التأكد من ذلك في تبويب الشبكة بأدوات المطوّر.