النقاط الرئيسية
- 01ثلاثة أنماط — موحدة ولكل زاوية وإهليلجية — تغطي كل شيء من الأزرار المدورة البسيطة إلى أشكال البقع العضوية.
- 02يدعم px و% و rem، لكل منها سلوك تحجيم مختلف.
- 03يكشف النمط الإهليلجي عن نصف قطر أفقي وعمودي لكل زاوية لصيغة CSS الكاملة border-radius.
- 04تستخدم المعاينة الحية خاصية CSS الفعلية، لذا فإن ما تراه بالضبط هو ما سيعرضه متصفحك.
من الزوايا المدورة البسيطة إلى أشكال البقع العضوية
من السهل جداً كتابة قيمة نصف قطر من أربع زوايا من الذاكرة — border-radius: 8px. لكن بمجرد أن تحتاج إلى نصف قطر مختلف لكل زاوية، أو تريد صيغة CSS الإهليلجية للأشكال العضوية، يصبح الاختصار غامضاً بسرعة. الصيغة الكاملة هي top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — ثماني قيم بترتيب محدد.
يتيح منشئ نصف القطر في Handytool سحب أشرطة تمرير لكل زاوية في أي نمط ورؤية الشكل يتحدث بشكل مباشر. قم بالتبديل بين px و% و rem دون إعادة حساب، وانسخ الاختصار الصحيح أو تصريح CSS الطويل عند الانتهاء.
كيفية تصميم نصف قطر الحدود
- 01
اختر نمطاً
يطبق الوضع الموحد نصف قطر واحد على جميع الزوايا الأربع. يتحكم وضع كل زاوية في كل زاوية بشكل مستقل. يضيف الوضع الإهليلجي نصف قطر أفقي وعمودي منفصل لكل زاوية.
- 02
اختر وحدة
اختر px للأحجام المطلقة، أو % للقيم التي تتناسب مع أبعاد العنصر، أو rem للأحجام المرتبطة بحجم الخط الجذر.
- 03
اسحب أشرطة التمرير
اضبط قيم نصف القطر واعرض تحديث عنصر المعاينة بشكل مباشر. بالنسبة لوضع كل زاوية، اسحب شريط تمرير كل زاوية بشكل مستقل.
- 04
معاينة الشكل
يطبق مربع المعاينة خاصية CSS border-radius الفعلية، لذا فإن الشكل الذي تراه هو الشكل الذي سيعرضه متصفحك.
- 05
انسخ CSS
انقر فوق نسخ لالتقاط تصريح border-radius والصقها في ورقة الأنماط الخاصة بك.
الأشكال الشائعة والوقت المناسب لاستخدام كل نمط
- 01زر الحبوب: وضع موحد بنسبة مئوية، يتم تعيينه على 50٪ — دائماً حبة كاملة بغض النظر عن عرض الزر
- 02بطاقة مع تقريب دقيق: وضع موحد px، 8-16 بكسل — النمط الأكثر شيوعاً في واجهة المستخدم
- 03الوسم أو التسمية غير المتماثلة: وضع كل زاوية، حاد من جانب واحد، مدور من الجانب الآخر
- 04صورة رمزية دائرية: وضع موحد بنسبة مئوية، 50٪ — يتناسب مع حاوية الصورة
- 05شكل بقعة عضوي: وضع إهليلجي مع قيم X/Y مختلفة لكل زاوية
معاينة فورية، لا شيء تم تحميله
منشئ نصف القطر من جانب العميل بالكامل. جميع أشرطة التمرير وتبديلات الأنماط وتغييرات الوحدات تحدّث المعاينة بشكل فوري دون رحلة خادم. لا توجد حساب وليس هناك حد للمعدل.
تعمل الأداة عبر جميع متصفحات حديثة. خاصية border-radius — بما فيها صيغة الإهليلجية X/Y — مدعومة في كل نسخة دائمة من Safari و Firefox و Edge و Chrome، لذا فإن الإخراج آمن للاستخدام بدون بادئات بائع أو بدائل.
الأسئلة الشائعة حول منشئ نصف القطر
ما الفرق بين px و% من أجل border-radius؟
نصف قطر البكسل مطلق — 16 بكسل دائماً 16 بكسل. نصف قطر النسبة المئوية نسبي لأبعاد العنصر، لذا 50٪ ينشئ دائرة مثالية على صندوق مربع وشكل إهليلجي على مستطيل.
متى يجب أن أستخدم الوضع الإهليلجي؟
استخدم الوضع الإهليلجي عندما تريد زاوية تنتفخ أكثر على محور واحد — لحبة أفقية أو شكل أوراق أو بقعة عضوية. يعبر CSS عن هذا كنصف قطر X / Y في اختصار border-radius.
لماذا يبدو نصف قطري النسبة المئوية خاطئاً على صندوق غير مربع؟
النسب المئوية الأفقية نسبية إلى عرض العنصر؛ والنسب المئوية الرأسية بالنسبة لارتفاعه. على عنصر واسع وقصير، تمتد الزوايا إلى أشكال إهليلجية بدلاً من الأقواس الدائرية.
هل يعمل الإخراج في كل متصفح؟
نعم — border-radius بما فيها صيغة الإهليلجية مدعومة في كل متصفح حديث: جميع نسخ Safari و Firefox و Edge و Chrome الدائمة. لا توجد بادئات بائع مطلوبة.
كيف أنشئ دائرة مثالية باستخدام border-radius؟
قم بتعيين جميع الزوايا على 50٪ في وضع النسبة المئوية على عنصر مربع. يحتاج العنصر أيضاً إلى عرض وارتفاع متساويان — استخدم aspect-ratio: 1 / 1 إذا كان الحجم ديناميكياً.