CSS/border-image

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

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

القيمة الابتدائية	لكل قيمة مختصرة: 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: كما حُدِّدت.

أمثلة

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

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

شيفرة HTML:

<div class="bitmap-border">The image is stretched to fill the area.</div>

شيفرة CSS:

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

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

<div class="gradient-border">The gradient will fill the border area.</div>

شيفرة CSS:

.gradient-border {
  padding: 20px;
  border: 20px solid;
  border-image: linear-gradient(#006699, salmon) 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'>;

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

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