مولّد border-radius في CSS

ما هي مولّد border-radius في CSS؟

مولّد border-radius في CSS هو محرّر بصري مجاني لخاصية border-radius في CSS، مصمَّم لمطوّري الواجهة الأمامية والمصمّمين. استخدم أشرطة التمرير وحقول الأرقام لضبط نصف القطر الأفقي والرأسي لكل زاوية بالبكسل، واختر وحدة، وفعّل الوضع الإهليلجي للحصول على صياغة الشرطة المائلة للزوايا البيضاوية. يُظهر مربع المعاينة الشكل المدوّر في الوقت الفعلي، ويُولَّد لك التصريح المختصر المضغوط لتنسخه. اختر إعدادًا مسبقًا مثل مدوّر أو حبة أو دائرة أو Blob عضوي من عنصر التحكم المجزأ للبدء بسرعة، ثم اضبط أي زاوية بدقة. استخدمه لتصميم البطاقات الناعمة وأزرار الحبة والدوائر المثالية والـ squircles والأشكال الزخرفية الشبيهة بالقطرة دون حفظ ترتيب الزوايا.

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

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

أمثلة

الزوايا الأربع كلها 16، الإهليلجي مُعطَّل

border-radius: 16px;

الإعداد المسبق حبة، كل الزوايا 9999

border-radius: 9999px;

أعلى اليسار 40/20، أعلى اليمين 10، أسفل اليمين 40/20، أسفل اليسار 10، الإهليلجي مُفعَّل

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

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

ما ترتيب الزوايا الأربع؟

تسرد الصياغة المختصرة الزوايا في اتجاه عقارب الساعة بدءًا من أعلى اليسار: أعلى اليسار، أعلى اليمين، أسفل اليمين، أسفل اليسار. تُخرج هذه الأداة القيم الأربع دائمًا بهذا الترتيب، فتكون النتيجة واضحة لا لبس فيها ويسهل تعديلها يدويًا لاحقًا.

ماذا يفعل الوضع الإهليلجي؟

يمكن لـ border-radius أن يأخذ نصف قطر أفقيًا وآخر رأسيًا لكل زاوية، يفصل بينهما شرطة مائلة، لرسم زوايا بيضاوية (إهليلجية) بدلًا من دائرية. فعّل الوضع الإهليلجي لضبط نصف قطر رأسي ثانٍ لكل زاوية؛ عندها يستخدم الإخراج صياغة الشرطة المائلة 'أفقي / رأسي'.

هل أستخدم px أم النسبة المئوية؟

تمنح البكسلات حجم زاوية ثابتًا بغض النظر عن المربع. أما النسب المئوية فهي نسبية إلى عرض المربع وارتفاعه، فوضع 50% على كل زاوية يحوّل المربع إلى دائرة مثالية ويتغيّر التدوير مع تغيّر حجم العنصر. بدّل الوحدة في الإعدادات.

كيف أصنع دائرة مثالية أو حبة؟

اختر الإعداد المسبق دائرة (50% على كل زاوية) لتحويل مربع إلى دائرة، أو الإعداد المسبق حبة (نصف قطر كبير جدًا بالبكسل) لتصبح الأضلاع القصيرة أنصاف دوائر كاملة. يمكنك أيضًا البدء من إعداد مسبق وضبط زوايا منفردة بدقة.

هل تُرفع بياناتي إلى أي مكان؟

لا. يعمل المولّد بالكامل في متصفحك باستخدام JavaScript — لا تُرسَل قيم نصف القطر إلى أي خادم أبدًا، فيعمل بخصوصية وحتى دون اتصال بعد تحميل الصفحة.