مولّد border-radius للزوايا المستديرة

كيفية استخدام مولّد border-radius

1. اسحب النقاط الموجودة على حواف المعاينة. تضبط كل نقطة ملوّنة نصف القطر الأفقي لإحدى الزوايا، وعند تفعيل زوايا إهليلجية (8 قيم) تضبط النقاط البيضاء الأنصاف العمودية.
2. أو اكتب قيمًا دقيقة في قسم الزوايا: أعلى اليسار وأعلى اليمين وأسفل اليمين وأسفل اليسار، ولكل زاوية حقل أفقي وحقل عمودي.
3. اختر الوحدة: % (نسبة مئوية من الصندوق) أو px (بكسل). يحوّل التبديل بين الوحدتين القيم الحالية، فيبقى الشكل كما هو.
4. اضبط عرض الصندوق (px) وارتفاع الصندوق (px) ليطابقا عنصرك، واستخدم كل الزوايا لتدوير الزوايا الأربع دفعة واحدة.
5. جرّب الأشكال الجاهزة (مستدير وحبة دواء ودائرة وورقة وقطرة وبيضة وتذكرة وثلاثة أشكال عضوية)، أو اضغط شكل عضوي عشوائي للحصول على شكل طبيعي غير منتظم.
6. فعّل الخصائص المفصّلة إذا كنت تفضّل تعريفات border-*-radius الأربعة المنفصلة، ثم انسخ شيفرة CSS بالضغط على نسخ.

لوحة المفاتيح: حدّد نقطة واضغط مفاتيح الأسهم لتغيير نصف قطرها خطوة واحدة (أو 10 خطوات مع Shift).

صيغة border-radius

تقبل الخاصية border-radius من قيمة واحدة إلى أربع قيم، بالترتيب التالي: أعلى اليسار، ثم أعلى اليمين، ثم أسفل اليمين، ثم أسفل اليسار. وكما في الهوامش، تُنسخ القيمة الناقصة من الزاوية المقابلة: فالقاعدة border-radius: 10px 20px تدوّر الزاويتين العليا اليسرى والسفلى اليمنى بمقدار 10px، والزاويتين الأخريين بمقدار 20px. وتكتب الأداة دائمًا أقصر صيغة مكافئة.

كل زاوية هي في الحقيقة ربع قطع ناقص له نصفا قطر. وتفصل الشرطة المائلة الأنصاف الأفقية عن العمودية، فيصل عدد القيم إلى ثماني قيم:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

قبل الشرطة المائلة: الأنصاف الأفقية للزوايا الأربع. وبعدها: الأنصاف العمودية. وإذا تطابقت القائمتان، يُحذف الجزء الذي بعد الشرطة.

البكسل أم النسبة المئوية؟

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

لزر على شكل حبة دواء، استخدم نصف قطر بالبكسل لا يقل عن نصف الارتفاع. يفعل الشكل الجاهز حبة دواء ذلك بالضبط وفق حجم الصندوق الذي أدخلته، وتنجح أيضًا قيمة كبيرة جدًا مثل 999px.

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

الأشكال العضوية (Blob)

تستخدم الأشكال العضوية الجاهزة وزر شكل عضوي عشوائي ثماني نسب مئوية يكون فيها مجموع المقبضين على كل ضلع 100 %. عندئذٍ تلتقي المنحنيات بدقة ويبدو الشكل كحصاة ملساء. ولتأثير «تحوّل» متحرك، انتقل بين شكلين عضويين باستخدام transition في CSS على الخاصية border-radius.