الخاصية border-image-width

من موسوعة حسوب
< CSS
مراجعة 04:23، 19 مارس 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة قسمين)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

الخاصية border-image-width في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).

بطاقة الخاصية

القيمة الابتدائية 1
تُطبَّق على جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة.
/* 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;

أمثلة

راجع صفحة 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>

انظر أيضًا

مصادر ومواصفات