الخاصية border-image

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

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

القيمة الابتدائية لكل قيمة مختصرة:
تُطبَّق على جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية 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'>;

انظر أيضًا

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