الخاصية border-image-width
الخاصية border-image-width في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).
/* border-image-width: all */
border-image-width: 3;
/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;
/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;
/* border-image-width: top right bottom left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
| القيمة الابتدائية | 1
|
|---|---|
| تُطبَّق على | جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse.
|
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. |
أمثلة
راجع صفحة border-image لأمثلة عن هذه الخاصية.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 15.0 | 15.0 | 11 | 15 | 6 |
البنية العامة
قد تأخذ هذه الخاصية قيمةً واحدةً أو قيمتين أو ثلاث قيم أو أربع قيم، ويمكن أن تكون القيمة إما طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto.
- إذا حُدِّدَت قيمة واحدة فستُطبَّق على الحواف الأربع جميعها.
- إذا حُدِّدَت قيمتين فسيُضبَط عرض الحواف الرأسية والأفقية (على التوالي وبالترتيب).
- إذا حُدِّدَت ثلاث قيم فسيُضبَط عرض الحافة العلوية والحواف الأفقية والحافة السفلية (على التوالي وبالترتيب).
- إذا حُدِّدَت أربع قيم فسيُضبَط عرض الحواف العلوية واليمينية والسفلية واليسارية (على التوالي وبالترتيب).
القيمة <length> أو <percentage>
تُمثِّل هذه القيمة عرض الإطار، ويمكن أن تكون إما قيمةً مطلقةً أو نسبيةً، والقيم النسبية تُشير إلى أبعاد الإطار نسبةً إلى عرض أو ارتفاع الصورة الموافق. ولا يجوز أن تكون هذه القيمة سالبةً.
القيمة <number>
تُمثِّل هذه القيمة عدد المرات التي يجب فيها ضرب قيمة الخاصية border-width، ولا يجوز أن تكون هذه القيمة سالبةً.
القيمة auto
ستؤدي هذه القيمة إلى ضبط عرض الإطار لما يوافق العرض أو الارتفاع الفعلي للصورة المستخدم، وإذا لم يكن للصورة أبعاد فعلية فستؤخذ القيمة من القيمة المحسوبة للخاصية border-width.
البنية الرسمية
border-image-width: [ <length-percentage> | <number> | auto ]{1,4};
حيث:
<length-percentage> = <length> | <percentage>