خصائص عرض صور الحدود CSS
- الصفحة السابقة border-image-source
- الصفحة التالية border-inline
التعريف والاستخدام
يحدد خاصية border-image-width عرض صورة الحدود.
يرجى الرجوع أيضًا إلى:
دليل CSS3:حافة CSS3
مثال
تحديد عرض صورة الحدود:
div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}
جملة CSS
border-image-width: number|%|auto;
التعليق:تحدد الخاصية border-image-width الأربعة الأولى كيفية تقسيم صورة الحدود إلى تسع أجزاء. إنها تمثل المسافة من الجانب العلوي، الأيمن، السفلي، واليسار للمنطقة. إذا تم تجاهل الرقم الرابع، فإنه سيكون نفس القيمة الثانية. إذا تم تجاهل الرقم الثالث، فإنه سيكون نفس القيمة الأولى. إذا تم تجاهل الرقم الثاني، فإنه سيكون نفس القيمة الأولى. لا يسمح بأي قيمة سلبية كقيمة لـ border-image-width.
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| number | مثال على ضعف العرض الحدودي المحدد. |
| % | المرجع على حجم منطقة الصورة الحدودية: طول المنطقة يؤثر على الانحراف الأفقي، وعرض المنطقة يؤثر على الانحراف العمودي. |
| auto | إذا تم تحديد هذه الخاصية، فإن العرض هو عرض القطعة الصوره المحددة بشكل طبيعي. |
تفاصيل التقنية
| القيمة الافتراضية: | لا شيء |
|---|---|
| التنسيق: | لا |
| الإصدار: | CSS3 |
| جافا سكربت الجملة: | object.style.borderImageWidth="30 30" |
دعم المتصفح
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 13.0 | 6.0 | 15.0 |
يرجى الرجوع border-image خصائص.
- الصفحة السابقة border-image-source
- الصفحة التالية border-inline
