مولّد الزوايا المدوّرة والأشكال
اضبط أنصاف الأقطار الأفقية والرأسية للزوايا الأربع بوحدة px أو % وعاين الشكل. انسخ شيفرة border-radius المولَّدة أو احفظها. لا يشمل CSS عرض المعاينة وارتفاعها ولونها.
ما يمكنك فعله
اضبط الاستدارة من إعداد جاهز
اختر من 8 إعدادات جاهزة، منها الزوايا المستديرة والكبسولة والورقة، واضبط أنصاف الأقطار. اختيار إعداد جاهز يستبدل أنصاف الأقطار والوحدة.
امنح كل زاوية من الزوايا الأربع استدارة مختلفة
أوقف إعداد نصف القطر نفسه لإدخال أنصاف الأقطار الأفقية والعمودية للزوايا العليا اليسرى والعليا اليمنى والسفلى اليمنى والسفلى اليسرى على حدة.
تحقق من CSS واحصل عليه
أنشئ CSS بعد التحقق من الشكل. بدّل بين الصيغة المختصرة وإقرارات الزوايا المنفصلة، ثم انسخه أو احفظه كملف CSS.
كيفية الاستخدام
اختر إعدادًا جاهزًا ووحدة
أدخل أنصاف الأقطار مباشرة، أو اختر إعدادًا جاهزًا للبدء في الضبط. تبديل الوحدة لا يحوّل الأرقام.
قارن الاستدارة والشكل
أدخل قيمة واحدة لاستخدام نفس نصف القطر. لتغييره حسب الزاوية، ألغِ تحديد الخيار واضبط القيم الأفقية والعمودية.
تحقق من الحجم عند الحاجة
في إعدادات المعاينة يمكنك تغيير العرض والطول ولون المعاينة. لا تُشمل هذه في CSS الناتج.
أنشئ CSS ثم انسخه أو احفظه
اضغط «إنشاء CSS» واختر الصيغة التي تريدها. إذا غيّرت أنصاف الأقطار أو الوحدة أو الحجم، أعد الإنشاء.
مفيد عندما
اضبط شكل زوايا البطاقات والأزرار
عندما تريد إنشاء CSS لمكوّنات الصفحة بتنفيذ الزوايا الأربع بالتساوي أو بحصر الزوايا العلوية فقط.
أنشئ خلفية مستديرة غير متناظرة
عندما تريد تغيير الاستدارة الأفقية والعمودية حسب الزاوية لإنشاء حدود تشبه الأوراق أو الأشكال العضوية.
العلاقة بين أنصاف الأقطار والوحدات وحجم العرض
الأفقي والعمودي اتجاهان للزاوية نفسها
نصف القطر الأفقي يتحكم في الاستدارة الأفقية، ونصف القطر العمودي يتحكم في الاستدارة العمودية. لا تكون الزاوية مستديرة إذا كانت إحدى القيمتين 0. حدد الزوايا الأربع مع عقارب الساعة بدءًا من العليا اليسرى.
% يستخدم العرض والطول كمرجعين منفصلين
قيم % الأفقية نسبية إلى عرض العنصر والقيم العمودية نسبية إلى طوله. حتى مع الأرقام نفسها، يبدو المربع والمستطيل الطويل أو العريض مختلفين. تحدد px طولًا مباشرة.
الأنصار المفرطة الحجم تنكمش بالنسبة نفسها
إذا تجاوز مجموع أنصاف الأقطار المتجاورة طول الضلع، تُقلَّل أنصاف الأقطار المعروضة الثمانية جميعها بمعامل مشترك. تبقى قيم الإدخال وCSS الناتج دون تغيير. في التفاصيل بعد الإنشاء يمكنك التحقق من أنصاف الأقطار المستخدمة في المعاينة.
مدى الأشكال التي يمكن للزوايا المستديرة التعبير عنها
تجعل border-radius الزوايا منحنيات بيضاوية. لا يمكنها إنشاء تجاويف أو مضلعات عشوائية. الإعداد الجاهز squircle يقارب الشكل بزوايا بيضاوية؛ لكنه لا يعيد إنتاج المنحنى الرياضي بدقة.
الأسئلة الشائعة
هل يمكنني ضبط تقريب مختلف لكل زاوية؟
نعم. ألغِ تحديد «استخدام نفس نصف القطر لكل الزوايا» لإدخال نصف القطر الأفقي والعمودي لكل زاوية على حدة. إعادة تحديده تجعل جميع أنصاف الأقطار مساوية لنصف القطر الأفقي للزاوية العليا اليسرى.
هل تُحوَّل الأرقام عند تبديل الوحدات؟
لا. تبقى الأرقام كما هي ولا تتغير إلا الوحدة. إذا بقيت قيمة أكبر من 100 بعد التبديل من px إلى %، أعد إدخالها ضمن النطاق 0–100.
هل يشمل CSS حجم المعاينة ولونها؟
لا. يحتوي الإخراج على إقرارات border-radius فقط. اضبط العرض والطول ولون الخلفية في الصفحة أو المكوّن الذي تستخدمه فيه.
لماذا يكون الشكل المعروض بزوايا أكثر استدارة من أنصاف الأقطار التي أدخلتها؟
يقلّل المتصفح أنصاف الأقطار المعروضة بالنسبة نفسها لمنع تقاطع منحنيات الزوايا. يمكنك التحقق من معامل التقليص وقيم px لكل زاوية ضمن «أنصاف الأقطار المستخدمة للعرض».
المدخلات والنتائج
- أنصاف الأقطار
- حدد القيم الثماني 모두 بنفس الوحدة: 0–100% أو 0–9999px. القيم العشرية مقبولة أيضًا.
- المعاينة
- عرض المعاينة وطولها أعداد صحيحة من 1–400px. يمكن تمرير العرض الذي لا يتسع أفقيًا داخل الحقل.
- الإخراج
- الصيغة المختصرة لـ border-radius أو إقرارات لكل زاوية من الزوايا الأربع. انسخ border-radius.css أو احفظه.
- غير مشمول
- العرض والطول ولون الخلفية وتصدير الصور أو SVG.