الفرق بين المراجعتين لصفحة: «CSS/border-image-outset»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
إضافة قسمين |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-outset</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-outset</code>}}</noinclude> | ||
الخاصية <code>border-image-outset</code> في CSS تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار. | الخاصية <code>border-image-outset</code> في CSS تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. | |كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* border-image-outset: all */ | |||
border-image-outset: 1.5; | |||
/* border-image-outset: vertical horizontal */ | |||
border-image-outset: 1 1.2; | |||
/* border-image-outset: top horizontal bottom */ | |||
border-image-outset: 30px 2 45px; | |||
/* border-image-outset: top right bottom left */ | |||
border-image-outset: 7px 12px 14px 5px; | |||
/* القيم العامة */ | |||
border-image-outset: inherit; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
راجع صفحة الخاصية <code>[[CSS/border-image|border-image]]</code>. | راجع صفحة الخاصية <code>[[CSS/border-image|border-image]]</code>. | ||
| سطر 61: | سطر 62: | ||
* عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة). | * عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة). | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تُحدِّد مقدار تجاوز صورة الإطار الحدود الخارجية للإطار. لا يُسمَح بالقيم السالبة. | تُحدِّد مقدار تجاوز صورة الإطار الحدود الخارجية للإطار. لا يُسمَح بالقيم السالبة. | ||
=== | === <code>[[CSS/number|<number>]]</code> === | ||
تُحدِّد القيمة التي ستُضرَب بها قيمة الخاصية <code>[[CSS/border-width|border-width]]</code> لتحديد قيمة الخاصية <code>border-image-outset</code>. لا يُسمَح بالقيم السالبة. | تُحدِّد القيمة التي ستُضرَب بها قيمة الخاصية <code>[[CSS/border-width|border-width]]</code> لتحديد قيمة الخاصية <code>border-image-outset</code>. لا يُسمَح بالقيم السالبة. | ||
| سطر 73: | سطر 74: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-image|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-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-outset CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-outset CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 04:02، 19 مارس 2018
الخاصية border-image-outset في CSS تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
بطاقة الخاصية
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse.
|
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. |
/* border-image-outset: all */
border-image-outset: 1.5;
/* border-image-outset: vertical horizontal */
border-image-outset: 1 1.2;
/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 2 45px;
/* border-image-outset: top right bottom left */
border-image-outset: 7px 12px 14px 5px;
/* القيم العامة */
border-image-outset: inherit;
أمثلة
راجع صفحة الخاصية border-image.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 15.0 | 15.0 | 11 | 15 | 6 |
البنية العامة
يمكن تحديد قيمة واحدة للخاصية border-image-outset أو قيمتين أو ثلاث قيم أو أربع قيم.
- عند تحديد قيمة واحدة، فستُطبّق على جميع أوجه الإطار.
- عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الإطارين العلوي والسفلي، والقيمة الثانية على الإطارين الأيمن والأيسر.
- عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الإطار العلوي، والقيمة الثانية على الإطارين الأيمن والأيسر، والقيمة الثالثة على الإطار السفلي.
- عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة).
<length>
تُحدِّد مقدار تجاوز صورة الإطار الحدود الخارجية للإطار. لا يُسمَح بالقيم السالبة.
<number>
تُحدِّد القيمة التي ستُضرَب بها قيمة الخاصية border-width لتحديد قيمة الخاصية border-image-outset. لا يُسمَح بالقيم السالبة.
البنية الرسمية
border-image-outset: [ <length> | <number> ]{1,4};
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-imageوهي:border-image-source، وborder-image-slice، وborder-image-width، وborder-image-repeat. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color.