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

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
سطر 69: سطر 69:
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مواصفة [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].  
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Border]]
[[تصنيف:CSS Border|{{SUBPAGENAME}}]]

مراجعة 15:34، 28 يناير 2018

الخاصية border-image-source في CSS تُعرِّف صورةً <image> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى none، فسيُستخدَم الشكل المُعرَّف في الخاصية border-style.

/* لا توجد صورة للإطار */
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()‎.

القيمة الابتدائية none
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة none، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق.

أمثلة

راجع صفحة 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>;

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