English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يُعين خاصية border-radius زوايا العنصر بحالة دائرية. إنهborder-top-left-radius،border-top-right-radius،border-bottom-right-radiusوborder-bottom-left-radiusاختصار الخاصية.
الجدول أدناه يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى استخدامها في سكربتات جافا سكربت.
| القيمة الافتراضية: | 0 |
|---|---|
| يُستخدم في: | جميع العناصر |
| الوراثة: | لا |
| يمكن تفعيل التحريك: | نعم.يرجى الرجوع إلى خصائص التحريك。 |
| الإصدار: | ميزة جديدة في CSS3 |
| جافا سكربت: | object object.style.borderRadius="8px" |
ملاحظة:حتى لو لم يتم تعريف الحواف أو إعداد قيمها على none، فإن خاصية border-radius ستجعل خلفية العنصر تبدو كروية.
النحو التالي للسلوك الخاص بهذا الخصائص:
border-radius: [طول | نسبة] 1 إلى 4 قيم \-------------------------------/ First radii / [طول | نسبة] 1 إلى 4 قيم | قيمة مبدئية | وراثي \------------------------------/ Second radii (optional)
يمكن استخدام هذا الرمز النصي بفصل قيم واحدة، إثنتين، ثلاثة أو أربعة فراغات.
إذا تم تحديدقيمة واحدة، فإنها تعرف قطر جميع الزوايا.
إذا تم تحديدقيمتان، يتم استخدام القيمة الأولى للزاوية العلوية اليسرى والزاوية السفلية اليمنى، والقيمة الثانية للزاوية العلوية اليمنى والزاوية السفلية اليسرى.
إذا تم تحديدثلاث قيم، يتم استخدام القيمة الأولى للزاوية العلوية اليسرى، والقيمة الثانية للزاوية العلوية اليمنى والزاوية السفلية اليسرى، والقيمة الثالثة للزاوية السفلية اليمنى.
إذا تم تحديدأربعة قيم، يتم تطبيق كل قيمة على الزاوية العلوية اليسرى، الزاوية العلوية اليمنى، الزاوية السفلية اليمنى والزاوية السفلية اليسرى.
في المثال أدناه، يتم عرض كيفية استخدام خاصية border-radius.
div {
border: 2px solid #f08080;
border-radius: 20px;
}اختبار لـ‹/›ملاحظة:القيمة الثانية المختارة بشكل اختياري (مقدمة بـ “/”) تعرف نصف القطر العمودي للزاوية، وبالتالي تكون شكل الزاوية ربع دائرة. إذا تم تهميش القيمة الثانية أو إذا كانت متساوية للقيمة الثانية، فإن شكل الزاوية يكون ربع دائرة. إذا كانت أي قيمة صفر، فإن الزاوية تكون مربعة وليس زاوية مروجة.
جدول التالي يصف القيم لهذه الخاصية.
| القيمة | وصف |
|---|---|
| length | في القيم الطولية px، pt، cm، em وما إلى ذلك، لا يُسمح بالقيم السلبية. |
| percentage | حجم نصف القطر، بالporcentagem. إذا كان الزاوية مستديرة، فإن الـ porcentagem لحجم نصف القطر يُحسب بالنسبة لعرض العنصر المفهوم، والـ porcentagem لحجم نصف القطر الـ عمودي يُحسب بالنسبة لارتفاع العنصر المفهوم. لا يُسمح بالقيم السلبية. |
| initial | ضبط هذه الخاصية إلى قيمتها الافتراضية. |
| inherit | إذا تم تحديد هذا، فإن العناصر المرتبطة تستخدم قيمة الخاصية border-radius للعنصر الأب. |
توافق متصفحات border-radius، الأرقام في الجدول التالي تعكس أرقام الإصدارات الأدنى للمتصفحات التي تدعم الخاصية. جميع المتصفحات الرئيسية تدعم هذه الخاصية.
|
تحذير: Internet Explorer 8 وكل الإصدارات السابقة لا تدعم الخاصية border-radius. يتم دعمها في إصدار IE9 وأعلى.
انظر إلى التعليمات:CSS Border،CSS3 Border。
خصائص مرتبطة:border-bottom-left-radius،border-bottom-right-radius،border-top-left-radius،border-top-right-radius