CSS/border-image

الخاصية border-image في CSS تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية border-image بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية border-style.

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

القيمة الابتدائية	لكل قيمة مختصرة: border-image-source: none border-image-slice: 100% border-image-width: 1 border-image-outset: 0 border-image-repeat: stretch
تُطبَّق على	جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل قيمة مختصرة: border-image-source: القيمة none، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق. border-image-slice: قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم تكون أطوالًا مطلقة أو نسبًا مئوية، إضافةً إلى الكلمة المحجوزة fill. border-image-width: كما حُدِّدت، لكن مع تحويل الأطوال النسبية إلى مطلقة. border-image-outset: كما حُدِّدت، لكن مع تحويل الأطوال النسبية إلى مطلقة. border-image-repeat: كما حُدِّدت.

/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

أمثلة

استخدام صورة لإطار

مثال عن استخدام صورة مربعة الشكل تتألف من معيّنات برتقالية اللون على الزوايا الأربع، أما الأطراف فهي معيّنات بلونٍ آخر، وبقية الصورة شفافة.

صورة لتستخدم كإطار للعناصر بأبعاد 81 بكسل عرضًا و 81 بكسل ارتفاعًا.

شيفرة HTML:

<div class="bitmap-border">ستمتط الصورة لملأ مكان الأطار.</div>

شيفرة CSS:

.bitmap-border { 
  padding: 20px;
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
}

استخدام تدرج لوني

مثال عن استخدام تدرج لوني. شيفرة HTML:

<div class="gradient-border">سيملأ تدرجٌ لوني منطقة الإطار.</div>

شيفرة CSS:

.gradient-border {
  padding: 20px;
  border: 20px solid;
  border-image: linear-gradient(#205a23, #28832c) 10;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	15.0	15.0	11	15	6

البنية العامة

لمعلومات إضافية عن القيم التي تقبلها هذه الخاصية، راجع صفحات الخاصيات border-image-source و border-image-slice و border-image-width و border-image-outset و border-image-repeat.

البنية الرسمية

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>;

انظر أيضًا

• صفحة الخاصيات التي تضبطها الخاصية المختصرة border-image وهي: border-image-source، و border-image-slice، و border-image-width، و border-image-outset، و border-image-repeat.
• صفحة الخاصيات التي تضبطها الخاصية المختصرة border وهي: border-width، و border-style، و border-color.
• استخدام صورة كخلفية عبر الخاصية background-image.
• استخدام العنصر <img> لإضافة صور إلى المستند.

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

• مواصفة CSS Backgrounds and Borders Module Level 3.