الفرق بين المراجعتين لصفحة: «CSS/border-image»

المراجعة الحالية بتاريخ 04:01، 19 مارس 2018

الخاصية 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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>border-image</code>}}</noinclude>
-الخاصية <code>border-image</code> في CSS تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية <code>border-image</code> بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية <code>[[CSS/border-style|border-style]]</code>.<syntaxhighlight lang="css">
+الخاصية <code>border-image</code> في CSS تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية <code>border-image</code> بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية <code>[[CSS/border-style|border-style]]</code>.
-/* image-source | height | width | repeat */
-border-image: url("/images/border.png") 30 30 repeat;
-border-image: url("/images/border.png") 30 30 stretch;
-</syntaxhighlight>
+== بطاقة الخاصية ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 33: / سطر 30: @@
 * <code>[[CSS/border-image-repeat|border-image-repeat]]</code>: كما حُدِّدت.
-|}
+|}<syntaxhighlight lang="css">
+/* image-source | height | width | repeat */
+border-image: url("/images/border.png") 30 30 repeat;
+border-image: url("/images/border.png") 30 30 stretch;
+</syntaxhighlight>
 == أمثلة ==
+=== استخدام صورة لإطار ===
 مثال عن استخدام صورة مربعة الشكل تتألف من معيّنات برتقالية اللون على الزوايا الأربع، أما الأطراف فهي معيّنات بلونٍ آخر، وبقية الصورة شفافة.
 [[ملف:Border-image-example.png|بديل=صورة لتستخدم كإطار للعناصر.|بدون|تصغير|صورة لتستخدم كإطار للعناصر بأبعاد 81 بكسل عرضًا و 81 بكسل ارتفاعًا.]]
 شيفرة HTML:<syntaxhighlight lang="html">
-<div class="bitmap-border">The image is stretched to fill the area.</div>
+<div class="bitmap-border">ستمتط الصورة لملأ مكان الأطار.</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 47: / سطر 50: @@
    border-image: url("border.png") 27 round stretch;
 }
-</syntaxhighlight>مثال عن استخدام تدرج لوني. شيفرة HTML:<syntaxhighlight lang="html">
+</syntaxhighlight>
-<div class="gradient-border">The gradient will fill the border area.</div>
+=== استخدام تدرج لوني ===
+مثال عن استخدام تدرج لوني. شيفرة HTML:<syntaxhighlight lang="html">
+<div class="gradient-border">سيملأ تدرجٌ لوني منطقة الإطار.</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 54: / سطر 60: @@
    padding: 20px;
    border: 20px solid;
-   border-image: linear-gradient(#006699, salmon) 10;
+   border-image: linear-gradient(#205a23, #28832c) 10;
 }
 </syntaxhighlight>
@@ سطر 75: / سطر 81: @@
 == البنية العامة ==
-راجع صفحات الخاصيات <code>[[CSS/border-image-source|border-image-source]]</code> و <code>[[CSS/border-image-slice|border-image-slice]]</code> و <code>[[CSS/border-image-width|border-image-width]]</code> و <code>[[CSS/border-image-outset|border-image-outset]]</code> و <code>[[CSS/border-image-repeat|border-image-repeat]]</code>.
+لمعلومات إضافية عن القيم التي تقبلها هذه الخاصية، راجع صفحات الخاصيات <code>[[CSS/border-image-source|border-image-source]]</code> و <code>[[CSS/border-image-slice|border-image-slice]]</code> و <code>[[CSS/border-image-width|border-image-width]]</code> و <code>[[CSS/border-image-outset|border-image-outset]]</code> و <code>[[CSS/border-image-repeat|border-image-repeat]]</code>.
 === البنية الرسمية ===
 <syntaxhighlight lang="css">
 border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>;
 </syntaxhighlight>
+== انظر أيضًا ==
+*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>border-image</code> وهي: <code>[[CSS/border-image-source|border-image-source]]</code>، و <code>[[CSS/border-image-slice|border-image-slice]]</code>، و <code>[[CSS/border-image-width|border-image-width]]</code>، و <code>[[CSS/border-image-outset|border-image-outset]]</code>، و <code>[[CSS/border-image-repeat|border-image-repeat]]</code>.
+*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
+*استخدام صورة كخلفية عبر الخاصية <code>[[CSS/background-image|background-image]]</code>.
+*استخدام العنصر <code>[[HTML/img|<img>]]</code> لإضافة صور إلى المستند.
 == مصادر ومواصفات ==