فهم خاصية border-radius في CSS
تتحكم خاصية border-radius في CSS في درجة انحناء زوايا العناصر الرسومية وصناديق التصميم على صفحات الويب. تتيح هذه الخاصية للمصممين والمطورين الانتقال من الحواف الحادة التقليدية إلى حواف دائرية ناعمة، مما يغير المظهر البصري للعنصر بالكامل.
يعمل "مولّد تدوير الزوايا" على تبسيط عملية حساب هذه الانحناءات وتوليد الكود البرمجي الخاص بها فورًا. تبدأ القيمة الافتراضية لشريط التمرير في الأداة من 24، مما ينتج عنه كود CSS التالي:
border-radius: 24px;.
تتم معالجة جميع العمليات الحسابية ورسم الزوايا مباشرة في متصفحك، حيث يتم رسم كل زاوية مباشرة في متصفحك ولا يتم تحميل أي شيء قمت بتعيينه هنا على BroBroGo.
الفرق بين وحدات البكسل (px) والنسبة المئوية (%)
عند تحديد قيم انحناء الزوايا، يؤثر اختيار الوحدة الفيزيائية بشكل مباشر على سلوك العنصر واستجابته:
- وحدة البكسل (px): تعمل على تدوير الزاوية بمقدار ثابت ومحدد لا يتغير بتغير أبعاد العنصر. إذا تم تحديد انحناء الزاوية بقيمة معينة بالبكسل، فستظل هذه القيمة ثابتة سواء كان الصندوق صغيرًا أو كبيرًا.
- وحدة النسبة المئوية (%): تعتمد على أبعاد الصندوق نفسه. تتبع النسبة المئوية الأفقية عرض العنصر، بينما تتبع النسبة المئوية الرأسية ارتفاع العنصر. هذا يعني أن الانحناء يتمدد ويتقلص ديناميكيًا مع تغير حجم العنصر، وهو أمر أساسي في التصميمات المستجيبة.
اتجاهات التحكم والربط في الواجهة
تتبع أشرطة التمرير الأربعة في الأداة اتجاه عقارب الساعة للتحكم في زوايا الصندوق. يبدأ التحكم من الزاوية العلوية اليسرى وينتهي بالزاوية السفلية اليسرى وفق الترتيب التالي:
- أعلى اليسار
- أعلى اليمين
- أسفل اليمين
- أسفل اليسار
عند تفعيل خيار "ربط جميع الزوايا"، يظهر شريط تمرير واحد يحمل اسم "جميع الزوايا" للتحكم في الزوايا الأربع معًا بنفس القيمة. وعند إلغاء تفعيل هذا الخيار، تنفصل عناصر التحكم لتتيح ضبط كل زاوية بشكل مستقل عبر أشرطة التمرير المخصصة لها. تتراوح قيم أشرطة التمرير في جميع الأوضاع بين 0 و 100.
الزوايا الدائرية مقابل الزوايا البيضاوية
تحدد طريقة صياغة نصف قطر الزاوية شكل الانحناء النهائي:
الزوايا الدائرية (الوضع العادي)
عند إيقاف تشغيل خيار "زوايا بيضاوية"، تكون كل زاوية عبارة عن ربع دائرة مثالية بنصف قطر واحد متساوٍ في البعدين الأفقي والرأسي. ينتج عن هذا الوضع كود CSS مختصر ومباشر.
الزوايا البيضاوية (الوضع البيضاوي)
عند تفعيل خيار "زوايا بيضاوية"، تمنح الأداة كل زاوية نصف قطر أفقي ونصف قطر رأسي مستقلين. يظهر لكل زاوية شريطان للتمرير: "أفقي" و"رَأسِيّ". يتيح هذا الفصل إنشاء أشكال عضوية ناعمة وغير متناظرة تشبه الفقاعات.
في هذا الوضع، تكتب الأداة الكود بصيغة القيمتين المفصولتين بشرطة مائلة (/) في CSS للفصل بين أنصاف الأقطار الأفقية والرأسية، وتعود تلقائيًا إلى الصيغة المختصرة العادية بمجرد إلغاء تفعيل الوضع البيضاوي وجعل الزوايا دائرية مجددًا.
استخدام الإعدادات المسبقة لإنشاء الأشكال الشائعة
توفر الأداة مجموعة من الأزرار الجاهزة تحت عنوان "الإعدادات المسبقة" لتطبيق أشكال هندسية وعضوية فورية بنقرة واحدة:
| الإعداد المسبق | الوصف والتأثير البصري | طريقة التطبيق البرمجية |
|---|---|---|
| حاد | يزيل أي تدوير ويعيد الزوايا إلى زاوية 90 درجة حادة. | يضبط جميع القيم على 0. |
| مدور | يمنح الصندوق زوايا دائرية كلاسيكية ناعمة ومتساوية. | يطبق انحناءً متناسقًا على الزوايا الأربع. |
| دائرة | يحول العنصر المربع تمامًا إلى دائرة مثالية. | يضبط جميع الزوايا على قيمة 50%. |
| شكل فقاعي | ينشئ مظهرًا عضويًا غير متماثل باستخدام الوضع البيضاوي. | يطبق قيمًا متفاوتة للأبعاد الأفقية والرأسية. |
| ورقة | ينشئ شكلًا يشبه ورقة الشجر بتدوير زوايا متقابلة وترك الأخرى حادة. | يطبق قيم انحناء عالية على زاويتين متقابلتين فقط. |
كيفية تطبيق كود CSS المولد
بعد ضبط الزوايا والوصول إلى الشكل المطلوب في منطقة المعاينة البصرية، تعرض الأداة الكود البرمجي المولد مباشرة تحت عنوان "CSS".
لتطبيق هذا التأثير على موقعك:
- انقر على زر "نسخ CSS" لنسخ الكود إلى الحافظة.
- افتح ملف تنسيق الويب الخاص بك (CSS).
- الصق الخاصية المنسوخة داخل محدد العنصر المطلوب، على سبيل المثال:
.custom-box {
border-radius: 24px;
}
الأسئلة الشائعة
كيف تعمل الزوايا الأربع وpx مقابل %؟
ترتبط أشرطة التمرير الأربعة، باتجاه عقارب الساعة، بالزوايا العلوية اليسرى ثم العلوية اليمنى ثم السفلية اليمنى ثم السفلية اليسرى. بوحدة px، تُدوّر الزاوية بمقدار ثابت؛ وبالنسبة المئوية، يكون التدوير نسبةً إلى الصندوق — إذ تتبع النسبة الأفقية العرض وتتبع النسبة الرأسية الارتفاع، ولذلك تحوّل نسبة 50% المربع إلى دائرة.
ماذا يفعل الوضع البيضاوي؟
عند إيقاف الوضع البيضاوي، تكون كل زاوية ربع دائرة بنصف قطر واحد. وعند تشغيله، تحصل كل زاوية على نصف قطر أفقي وآخر رأسي مستقل، ما يتيح لك إنشاء أشكال عضوية ناعمة تشبه الفقاعات. يكتب المولّد الصيغة ذات القيمتين المفصولتين بشرطة مائلة، ثم يعود إلى الصيغة المختصرة بمجرد جعل الزوايا دائرية مجددًا.
كيف أقوم بعمل دائرة أو حبة مثالية؟
اربط الزوايا، ثم اختر النسبة المئوية واضبطها على 50% ليتحول المربع إلى دائرة. ولإنشاء زر بشكل كبسولة، أبقِ الوحدة بالبكسل واسحب قيمة الزاوية إلى أكثر من نصف ارتفاع الزر؛ فستظل الجوانب مستديرة بالكامل مهما كان عرضه. يضبط إعداد «دائرة» الحالة الأولى بنقرة واحدة.