مولد نصف قطر حدود CSS
معاينة نصف قطر الحدود
كود CSS
.element {
border-radius: 20px;
}
? الأسئلة الشائعة
كيف يعمل نصف قطر الحدود؟
تُستخدم خاصية border-radius لتقريب زوايا العنصر. يمكن أن تكون القيم بالبكسل أو النسبة المئوية أو em. يمكنك تحديد جميع الزوايا دفعة واحدة (border-radius: 10px) أو كل زاوية على حدة (الزاوية العلوية اليسرى، الزاوية العلوية اليمنى، الزاوية السفلية اليمنى، الزاوية السفلية اليسرى).
هل يمكنني إنشاء زوايا بيضاوية مستديرة؟
نعم! استخدم قيمتين مفصولتين بشرطة مائلة: border-radius: 50px / 25px. القيمة الأولى هي نصف القطر الأفقي، والثانية هي نصف القطر الرأسي، مما يُنشئ منحنيات بيضاوية بدلاً من المنحنيات الدائرية.
كيف أرسم دائرة مثالية؟
قم بتعيين قيمة نصف قطر الحواف (border-radius) إلى 50% على عنصر مربع. هذه النسبة المئوية نسبية لأبعاد العنصر، لذا فإن 50% على مربع يُنشئ دائرة. أما بالنسبة للمستطيلات، فاستخدم قيمة بكسل كبيرة بدلاً من ذلك.
هل يمكن أن يكون لكل زاوية قيم نصف قطر مختلفة؟
بالتأكيد! يمكنك تحديد قيم مختلفة لكل زاوية: border-radius: 10px 20px 30px 40px (الزاوية العلوية اليسرى، الزاوية العلوية اليمنى، الزاوية السفلية اليمنى، الزاوية السفلية اليسرى) أو استخدام خصائص فردية مثل border-top-left-radius.
هل يعمل مع الحدود والحشو؟
نعم، تتفاعل خاصية نصف قطر الحواف مع الحواف والحشو. تتبع الحافة الخارجية الحافة، بينما تتكيف الحافة الداخلية مع الحشو. تساعدك المعاينة المرئية على رؤية كيفية دمج هذه الخصائص.
هل بياناتي آمنة ومحمية؟
نعم، بكل تأكيد! تعمل هذه الأداة بالكامل داخل متصفحك. تتم معالجة جميع البيانات محليًا على جهازك - لا يتم تحميل أي شيء إلى خوادمنا. لا تغادر ملفاتك وبياناتك جهاز الكمبيوتر الخاص بك أبدًا، مما يضمن لك خصوصية وأمانًا تامين.