الفرق بين المراجعتين ل"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>;