الفرق بين المراجعتين ل"CSS/border-image-source"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-source</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-source</code>}}</noinclude> | ||
| − | الخاصية <code>border-image-source</code> في CSS تُعرِّف صورةً <code>[[CSS/image|<image>]]</code> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى <code>none</code>، فسيُستخدَم الشكل المُعرَّف في الخاصية <code>[[CSS/border-style|border-style]]</code>. | + | الخاصية <code>border-image-source</code> في CSS تُعرِّف صورةً <code>[[CSS/image|<image>]]</code> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى <code>none</code>، فسيُستخدَم الشكل المُعرَّف في الخاصية <code>[[CSS/border-style|border-style]]</code>. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|<code>none</code>، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق. | |<code>none</code>، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* لا توجد صورة للإطار */ | ||
| + | border-image-source: none; | ||
| + | |||
| + | /* تحديد مسار الصورة التي ستُعرَض في الإطار */ | ||
| + | border-image-source: url(image.jpg); | ||
| + | |||
| + | /* استخدام تدرج لوني */ | ||
| + | border-image-source: linear-gradient(to top, red, yellow); | ||
| + | /* القيم العامة */ | ||
| + | border-image-source: inherit; | ||
| + | border-image-source: initial; | ||
| + | border-image-source: unset; | ||
| + | </syntaxhighlight>ملاحظة: صحيحٌ أنَّ أي نوع من أنواع القيمة <code>[[CSS/image|<image>]]</code> يمكن أن يُستعمَل مع هذه الخاصية، لكن دعم المتصفحات ما يزال محدودًا، وبعض المتصفحات لا تدعم إلا الصور المُعرّفة عبر الدالة <code>url()</code>. | ||
== أمثلة == | == أمثلة == | ||
راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن سلوك مختلف القيم. | راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن سلوك مختلف القيم. | ||
| سطر 56: | سطر 57: | ||
تقبل الخاصية <code>border-image-source</code> إحدى القيمتين الآتيتين: | تقبل الخاصية <code>border-image-source</code> إحدى القيمتين الآتيتين: | ||
| − | === | + | === <code>none</code> === |
تُحدِّد أنَّه لا يجب استخدام صورة مع الإطار، وإنما يجب استخدام الشكل المُعرّف في الخاصية <code>[[CSS/border-style|border-style]]</code>. | تُحدِّد أنَّه لا يجب استخدام صورة مع الإطار، وإنما يجب استخدام الشكل المُعرّف في الخاصية <code>[[CSS/border-style|border-style]]</code>. | ||
| − | === | + | === <code>[[CSS/image|<image>]]</code> === |
مرجع إلى صورة لتستخدم في الإطار. | مرجع إلى صورة لتستخدم في الإطار. | ||
| سطر 67: | سطر 68: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-image|border-image]]</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>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-source CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-source CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 04:21، 19 مارس 2018
الخاصية border-image-source في CSS تُعرِّف صورةً <image> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى none، فسيُستخدَم الشكل المُعرَّف في الخاصية border-style.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | none، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق.
|
/* لا توجد صورة للإطار */
border-image-source: none;
/* تحديد مسار الصورة التي ستُعرَض في الإطار */
border-image-source: url(image.jpg);
/* استخدام تدرج لوني */
border-image-source: linear-gradient(to top, red, yellow);
/* القيم العامة */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
ملاحظة: صحيحٌ أنَّ أي نوع من أنواع القيمة <image> يمكن أن يُستعمَل مع هذه الخاصية، لكن دعم المتصفحات ما يزال محدودًا، وبعض المتصفحات لا تدعم إلا الصور المُعرّفة عبر الدالة url().
أمثلة
راجع صفحة border-image لأمثلة عن سلوك مختلف القيم.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 15.0 | 15.0 | 11 | 15 | 6 |
البنية العامة
تقبل الخاصية border-image-source إحدى القيمتين الآتيتين:
none
تُحدِّد أنَّه لا يجب استخدام صورة مع الإطار، وإنما يجب استخدام الشكل المُعرّف في الخاصية border-style.
<image>
مرجع إلى صورة لتستخدم في الإطار.
البنية الرسمية
border-image-source: none | <image>;
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-imageوهي:border-image-slice، وborder-image-width، وborder-image-outset، وborder-image-repeat. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color.