ما الذي تفعله الأداة
يتيح لك مولّد border-radius تشكيل الزوايا المستديرة بصريًا ونسخ أقصر CSS ممكن. استخدم نصف قطر واحدًا لكل الزوايا أو نصف قطر لكل زاوية، وفعّل الزوايا الإهليلجية لتمنح كل زاوية نصف قطر أفقيًا ورأسيًا مستقلين، وشاهد المعاينة تتغير أثناء السحب. يدعم px و% وrem وem، ويمكنك لصق قيمة border-radius موجودة لتعديلها. كل شيء يعمل داخل متصفحك.
طريقة الاستخدام
- ابدأ من قالب جاهز أو احتفظ بالشكل النموذجي.
- اختر الوحدة. تغيير الوحدة يحوّل القيم الحالية (rem وem تساويان 16px، و% نسبةً إلى صندوق المعاينة).
- فعّل نصف القطر نفسه لكل الزوايا لاستخدام منزلق واحد، أو أوقفه لضبط أعلى اليسار وأعلى اليمين وأسفل اليمين وأسفل اليسار كلًّا على حدة.
- فعّل زوايا إهليلجية ليظهر لكل زاوية منزلق أفقي وآخر رأسي.
- غيّر حجم المعاينة عبر العرض والارتفاع، ثم انسخ الشيفرة من بطاقة CSS. فعّل الإخراج المفصل إذا كنت تفضل أربع خصائص منفصلة.
مثال
.avatar { border-radius: 50%; }
.tab { border-radius: 12px 12px 0 0; }
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }من المفيد معرفته
- أقصر صيغة. يدمج الإخراج القيم المتساوية: أربع زوايا متطابقة تصبح قيمة واحدة، ويُحذف الجزء بعد الشرطة عندما تكون كل الزوايا دائرية.
- النسب المئوية تتبع الصندوق. النسب الأفقية تُحسب من عرض العنصر والرأسية من ارتفاعه، لذا فإن 50% على مستطيل تعطي قطعًا ناقصًا لا دائرة.
- أنصاف الأقطار التي لا تتسع يصغّرها المتصفح معًا، ولهذا تعطي قيمة px ضخمة شكل حبة دواء أنيقًا.
- العناصر الأبناء والفيضان. الزوايا المستديرة تقصّ الخلفية والإطار لكنها لا تقصّ محتوى العناصر الأبناء: أضف overflow: hidden لقصّ الصور داخل الصندوق.
الأسئلة الشائعة
› ماذا تعني الشرطة المائلة في border-radius؟
القيم قبل الشرطة هي أنصاف الأقطار الأفقية والقيم بعدها هي الرأسية. عندما تختلف، تصبح الزاوية ربع قطع ناقص بدلًا من ربع دائرة. مثلًا 50% / 30% يعطي انحناءً أكثر تسطحًا من 50%.
› بأي ترتيب تُكتب الزوايا الأربع؟
باتجاه عقارب الساعة بدءًا من أعلى اليسار: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. إذا كانت القيم أقل يكررها CSS: قيمتان تضبطان أعلى اليسار/أسفل اليمين وأعلى اليمين/أسفل اليسار، وثلاث قيم تضبط أعلى اليسار، وأعلى اليمين/أسفل اليسار، وأسفل اليمين.
› كيف أصنع دائرة أو شكل حبة دواء؟
border-radius: 50% يحوّل المربع إلى دائرة والمستطيل إلى قطع ناقص. لشكل حبة دواء بطرفين دائريين مهما كان العرض، استخدم طولًا كبيرًا جدًا مثل 9999px: يصغّر المتصفح أنصاف الأقطار التي لا تتسع، فيبقى الطرفان دائريين تمامًا.
› كيف تُصنع أشكال blob؟
تستخدم أشكال blob ثماني نسب مئوية مختلفة: أربعة أنصاف أقطار أفقية وأربعة رأسية، مثل 30% 70% 70% 30% / 30% 30% 70% 70%. اختر قالب blob، وفعّل الزوايا الإهليلجية، ثم اسحب منزلقات كل زاوية لإعادة تشكيله.