مثال
إضافة حدود المدورة ل <div> العنصر:
div
{
border: 2px solid;
border-radius: 25px;
}
انها محاولة لنفسك » تعريف واستخدام
ممتلكات نصف قطرها الحدود هي خاصية الاختزال لتحديد الحدود الأربعة - * - خصائص دائرة نصف قطرها.
Tip: هذه الخاصية تسمح لك لإضافة حدود مدورة إلى العناصر!
| القيمة الافتراضية: | 0 |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.borderRadius="25px" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | تسعة | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS بناء الجملة
border-radius:1-4 length|%/1-4 length|%|initial|inherit;Note: يتم إعطاء القيم الأربع لكل نصف قطر في الترتيب اليسار أعلى، أعلى يمين، أسفل اليمين، أسفل اليسار. إذا تم حذف أسفل الجانب الأيمن هو نفس أعلى اليمين. إذا تم حذف أسفل اليمين أنه هو نفسه من أعلى إلى اليسار. إذا تم حذف أعلى اليمين هو نفس العلوية اليسرى.
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| length | يحدد شكل زوايا. القيمة الافتراضية هي 0 | العبها " |
| % | يحدد شكل زوايا في٪ | العبها " |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مثال 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
مثال 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 حدود
HTML DOM المرجع borderRadius property