الخاصية border-image
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية border-image
في CSS تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية border-image
بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية border-style
.
بطاقة الخاصية
القيمة الابتدائية | لكل قيمة مختصرة:
|
---|---|
تُطبَّق على | جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse .
|
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | لكل قيمة مختصرة:
|
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
أمثلة
استخدام صورة لإطار
مثال عن استخدام صورة مربعة الشكل تتألف من معيّنات برتقالية اللون على الزوايا الأربع، أما الأطراف فهي معيّنات بلونٍ آخر، وبقية الصورة شفافة.
شيفرة 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>
لإضافة صور إلى المستند.