مولد Border Radius CSS
مولد border-radius CSS مرئي. اضبط كل زاوية بشكل مستقل مع معاينة فورية وانسخ كود CSS مباشرة.
ما هو CSS border-radius؟
CSS border-radius هي خاصية تقوم بتدوير زوايا الحد الخارجي للعنصر. يمكنك تعيين كل زاوية بشكل مستقل باستخدام قيمة إلى أربع قيم، أو التحكم في كل زاوية بشكل فردي.
كيف أصنع دائرة مثالية باستخدام border-radius؟
اضبط border-radius على 50% على عنصر مربع (عرض وارتفاع متساويين). هذا ينشئ دائرة مثالية. للشكل البيضاوي، استخدم border-radius: 50% على عنصر مستطيل.
ما الوحدات التي يمكنني استخدامها مع border-radius؟
يقبل border-radius قيم px و% وem وrem وvw وvh ووحدات طول CSS أخرى. النسب المئوية نسبية لأبعاد العنصر.
ما هي الصيغة المختصرة لـ border-radius؟
تتبع الصيغة المختصرة النمط: أعلى-يسار أعلى-يمين أسفل-يمين أسفل-يسار. قيمة واحدة تنطبق على جميع الزوايا. قيمتان تحددان أعلى-يسار/أسفل-يمين وأعلى-يمين/أسفل-يسار.
هل يمكنني إنشاء زوايا بيضاوية؟
نعم، باستخدام صيغة الشرطة المائلة (/) يمكنك تحديد أنصاف أقطار أفقية وعمودية منفصلة. مثلاً border-radius: 50% / 100px ينشئ منحنى بيضاوي.
هل يعمل border-radius على جميع العناصر؟
يعمل border-radius على معظم عناصر HTML بما في ذلك div وbutton وimg وinput. لكنه قد لا يقص المحتوى الفائض بدون overflow: hidden.
هل يمكنني إنشاء أشكال معقدة باستخدام border-radius؟
نعم، بدمج قيم نصف قطر مختلفة لكل زاوية، يمكنك إنشاء أشكال الكبسولة والأشكال البيضاوية وأوراق الأشكال والأشكال العضوية المخصصة.
هل border-radius مدعوم في جميع المتصفحات؟
نعم، border-radius مدعوم في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge ومتصفحات الهاتف المحمول.
كيف أصنع زرًا على شكل كبسولة؟
اضبط border-radius على قيمة تساوي أو تزيد عن نصف ارتفاع العنصر. لزر بارتفاع 40px، استخدم border-radius: 20px أو أعلى.
هل يؤثر border-radius على صور الخلفية؟
نعم، border-radius يقص الخلفية وصورة الخلفية والحد للعنصر. تتبع الخلفية الزوايا المستديرة تلقائيًا.
هل يمكنني تحريك border-radius؟
نعم، يمكن تحريك border-radius مع انتقالات ورسوم CSS المتحركة. يمكنك الانتقال بسلاسة بين قيم نصف القطر المختلفة.
هل يمكنني استخدام border-radius مع تحويلات CSS؟
نعم، يعمل border-radius جيدًا مع تحويلات CSS مثل rotate وscale وtranslate.
كيف أنشئ دائرة بحدود؟
طبق border-radius: 50% على عنصر مربع بعرض وارتفاع متساويين، ثم أضف خاصية border.
ما الفرق بين الخصائص الفردية والصيغة المختصرة؟
الخصائص الفردية مثل border-top-left-radius تمنحك تحكمًا دقيقًا في كل زاوية. الصيغة المختصرة تتيح لك تعيين زوايا متعددة في إعلان واحد.
كيفية استخدام مولد Border Radius CSS
صمّم الزوايا الدائرية بصريًا مع مولّد CSS border-radius هذا. يعمل بالكامل داخل متصفحك ولا يتم تحميل أي بيانات إلى أي مكان.
- اختر px أو % أو em أو rem من قائمة Unit المنسدلة.
- اسحب أشرطة التمرير Top Left و Top Right و Bottom Right و Bottom Left لضبط تقوس كل زاوية على حدة.
- فعّل خيار Link all corners لتطبيق قيمة واحدة على الزوايا الأربع معًا.
- انسخ كود CSS الناتج من المعاينة والصقه في ورقة الأنماط.
اجعل كل الزوايا 50% للحصول على دائرة أو شكل كبسولة مثالي، واستخدم em أو rem ليتناسب نصف القطر مع حجم الخط.
أدوات ذات صلة
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد CSS Grid مولد CSS Grid مرئي مجاني مع معاينة مباشرة. صمم تخطيطات شبكية متجاوبة بشكل تفاعلي وصدّر كود CSS جاهز للإنتاج فوراً.
- مولد CSS Flexbox مولد CSS Flexbox مرئي مع معاينة مباشرة. اضبط خصائص flex واحصل على كود CSS جاهز للاستخدام.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.