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

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

يمنحك مولد border-radius في CSS المجاني تحكمًا مرئيًا كاملًا في الزوايا المستديرة لأي عنصر HTML. اضبط كل زاوية على حدة أو اربطها جميعًا معًا، واختر من عدة وحدات (px و% و em و rem)، وشاهد النتيجة فورًا في لوحة المعاينة الحية.

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

يضم المولد 10 أشكال جاهزة مثل المربع والدائرة والكبسولة والدمعة والعضوي، إضافةً إلى مولد عشوائي للاستكشاف الإبداعي. يتوفر الإخراج بعدة صيغ منها الصيغة المختصرة في CSS وخصائص الزوايا الفردية وفئة CSS جاهزة للاستخدام وما يعادلها تقريبًا في Tailwind CSS.

الميزات الرئيسية

• تحكم مستقل في كل زاوية: العلوية اليسرى والعلوية اليمنى والسفلية اليمنى والسفلية اليسرى
• مفتاح ربط الزوايا لضبط نصف قطر موحد على الزوايا الأربع
• أربع وحدات: بكسل (px) ونسبة مئوية (%) وem وrem للتصاميم المتجاوبة
• معاينة فورية مع حجم عنصر قابل للضبط (100-300px) ومنتقي ألوان مخصص
• 10 أشكال جاهزة: مربع، مستدير، دائرة، كبسولة، علوي مستدير، سفلي مستدير، أيسر مستدير، أيمن مستدير، دمعة، وعضوي
• مؤشرات مرئية لقيم الزوايا تعرض نصف القطر الدقيق عند كل زاوية
• مولد نصف قطر عشوائي للإلهام والتجريب الإبداعي
• عدة صيغ لإخراج CSS: مختصرة، وخصائص فردية، وفئة CSS، وما يقابلها تقريبًا في Tailwind CSS
• نسخ إلى الحافظة بنقرة واحدة للاستخدام الفوري في مشاريعك
• أدوات تمرير مع عرض للمدى لضبط القيم بسهولة

كيفية استخدام مولد نصف قطر الحدود

1. اختر الوحدة: اختر px للأحجام الثابتة، أو % للتحجيم المتجاوب، أو em/rem للأحجام المرتبطة بالخط.
2. اضبط قيم الزوايا: استخدم أدوات التمرير لضبط نصف قطر كل زاوية على حدة، أو فعّل «ربط كل الزوايا» للحصول على استدارة موحدة.
3. جرّب الأشكال الجاهزة: انقر على أي من الأشكال العشرة الجاهزة مثل الدائرة أو الكبسولة أو الدمعة لتطبيق الإعدادات الشائعة فورًا.
4. عاين النتيجة: شاهد المعاينة الحية بحجم ولون قابلين للضبط لترى بالضبط كيف سيبدو border-radius.
5. انسخ كود CSS: انقر على «نسخ» للحصول على كود border-radius، أو استخدم قسم الصيغ البديلة للخصائص الفردية أو فئات Tailwind.

حالات الاستخدام

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

الأسئلة الشائعة

نصائح وأفضل الممارسات

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