Softonic

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

خطوة 1 / 2 إنشاء CSS
النتائج

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

كيفية بناء دائرة نصف قطرها الحدود

  1. 1

    اضبط كل زاوية

    أدخل نصف قطر للزوايا: أعلى اليسار وأعلى اليمين وأسفل اليمين وأسفل اليسار.

  2. 2

    اختر الوحدة

    بكسل px (حجم ثابت) أو نسبة مئوية % (نسبة إلى العنصر) أو rem (نسبة إلى حجم خط الجذر).

  3. 3

    أنشئ CSS

    اضغط على زر Generate CSS لإنشاء الصيغة المختصرة.

  4. 4

    انسخ القاعدة

    انسخ الصيغة المختصرة لـ `border-radius` وألصقها في ورقة الأنماط.

ترتيب مختصر

border-radius: top-left top-right bottom-right bottom-left;

نفس الهامش/الحشوة: في اتجاه عقارب الساعة بدءًا من أعلى اليسار. تعكس القيم المحذوفة الزاوية المقابلة. لذا فإن border-radius: 10px 20px; يعني 10 بكسل من أعلى اليسار وأسفل اليمين، و20 بكسل من أعلى اليمين وأسفل اليسار.

ما لا يفعله هذا المولّد

يضبط نصف قطر واحد لكل زاوية، لذا لا ينتج أبداً زوايا بيضاوية (الصيغة ذات القيمتين مع شرطة مائلة، مثل border-radius: 20px 10px / 5px 15px;) أو خصائص مطولة مثل border-top-left-radius. إذا احتجت إليها، اكتب CSS يدوياً.

النسبة المئوية مقابل البكسل

الوحدة السلوك
px ثابتة، لا تتغيّر مع حجم العنصر
% نسبة مئوية من عرض العنصر (أفقيًا) ومن ارتفاعه (عموديًا)
em تتغيّر تبعًا لحجم خط العنصر
rem تتغيّر تبعًا لحجم الخط الجذري

50% على عنصر مربع = دائرة. على مستطيل 200x100، 50% = 100 بكسل نصف قطر أفقي + 50 بكسل عمودي = قطع ناقص.

الأشكال الشائعة

الشكل CSS
دائرة (مربع) border-radius: 50%;
حبة دواء (pill) border-radius: 9999px; (أي قيمة ≥ نصف الارتفاع)
بطاقة مدوّرة border-radius: 8px; أو 12px
فقاعة محادثة border-radius: 18px 18px 0 18px; (الذيل في الأسفل يمينًا)
تدوير خفيف border-radius: 2px; أو 4px

قاعدة “نصف الارتفاع” للأزرار بشكل حبة

الزر بشكل حبة (pill) هو مستطيل تكون أطرافه الأفقية أنصاف دوائر مثالية. للحصول على ذلك بشكل موثوق، قم بتعيين border-radius على نصف ارتفاع العنصر على الأقل. يعد استخدام 9999px (أو أي قيمة كبيرة جدًا) آمنًا لأن المتصفح يربط نصف القطر بالهندسة الفعلية.

التفاعل مع الفائض

يقوم border-radius بقص الخلفية والحدود وظل الصندوق بشكل افتراضي فقط. لقص العناصر الفرعية (الصور، العناصر المتداخلة) إلى الشكل المستدير، أضف:

overflow: hidden;

أو استخدم isolation: isolate + overflow: hidden لتحتوي أيضًا على سياقات التراص.

ملاحظة إمكانية الوصول

لا توجد مشكلة في إمكانية الوصول مع نصف القطر الحدودي نفسه، ولكن التقريب الشديد للعناصر التفاعلية (الحبوب والرقائق) لا ينبغي أن يؤدي إلى تقليص هدف النقر. احتفظ بالأزرار بحجم 44 × 44 بكسل على الأقل (توصية WCAG) بغض النظر عن تقريب الزوايا.

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

نظرًا لأنه يتم قياس النسبة المئوية لنصف القطر الحدودي على أنها “% من العرض” أفقيًا و“% من الارتفاع“ عموديًا - على عنصر غير مربع، ينتج عن ذلك قطع ناقص. بالنسبة للدائرة، يجب أن يكون العنصر مربعًا، أو يستخدم قيم البكسل التي تطابق أبعاد العنصر.

فقط الخلفية والحدود ومربع الظل بشكل افتراضي. لا يتم قص العناصر التابعة إلا إذا قمت أيضًا بإضافة overflow: hidden إلى الأصل.

إنه قابل للتحريك بين القيم الرقمية: يعمل transition: border-radius 200ms; مع البكسل والنسبة المئوية. يمكن أن يؤدي التحريك بين اختصار بيضاوي الشكل معقد ونصف قطر بسيط إلى إنتاج إطارات متوسطة مذهلة؛ اختبار وتبسيط حالات البداية/النهاية إذا كانت تبدو غريبة.

لا تحدد المواصفات حدًا أقصى، لكن المتصفحات تربط نصف القطر الفعال بنصف الحافة الأقصر للعنصر. يؤدي استخدام border-radius: 9999px على زر يبلغ طوله 40 بكسل إلى إنتاج قرص - يتم تثبيت المتصفح على 20 بكسل بصمت.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

عارض ملفات HAR

افتح تسجيلات شبكة HAR محليًا، وصفِّ الطلبات، وافحص الرؤوس المحجوبة والتوقيتات، وصدِّر ملخصات منقحة من دون رفع الملف.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

الأداة متاحة بلغات أخرى