الفرق بين المراجعتين ل"CSS/border-image-width"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-width</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-width</code>}}</noinclude> | ||
| − | الخاصية <code>border-image-width</code> في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية <code>border-image-width</code> أكبر من قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content). | + | الخاصية <code>border-image-width</code> في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية <code>border-image-width</code> أكبر من قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content). |
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 35: | سطر 20: | ||
|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. | |كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* border-image-width: all */ | ||
| + | border-image-width: 3; | ||
| + | |||
| + | /* border-image-width: vertical horizontal */ | ||
| + | border-image-width: 2em 3em; | ||
| + | |||
| + | /* border-image-width: top horizontal bottom */ | ||
| + | border-image-width: 5% 15% 10%; | ||
| + | |||
| + | /* border-image-width: top right bottom left */ | ||
| + | border-image-width: 5% 2em 10% auto; | ||
| + | /* Global values */ | ||
| + | border-image-width: inherit; | ||
| + | border-image-width: initial; | ||
| + | border-image-width: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن هذه الخاصية. | راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن هذه الخاصية. | ||
| سطر 62: | سطر 63: | ||
* إذا حُدِّدَت ثلاث قيم فسيُضبَط عرض الحافة العلوية والحواف الأفقية والحافة السفلية (على التوالي وبالترتيب). | * إذا حُدِّدَت ثلاث قيم فسيُضبَط عرض الحافة العلوية والحواف الأفقية والحافة السفلية (على التوالي وبالترتيب). | ||
* إذا حُدِّدَت أربع قيم فسيُضبَط عرض الحواف العلوية واليمينية والسفلية واليسارية (على التوالي وبالترتيب). | * إذا حُدِّدَت أربع قيم فسيُضبَط عرض الحواف العلوية واليمينية والسفلية واليسارية (على التوالي وبالترتيب). | ||
| − | === | + | === <code>[[CSS/length|<length>]]</code> أو <code>[[CSS/percentage|<percentage>]]</code> === |
تُمثِّل هذه القيمة عرض الإطار، ويمكن أن تكون إما قيمةً مطلقةً أو نسبيةً، والقيم النسبية تُشير إلى أبعاد الإطار نسبةً إلى عرض أو ارتفاع الصورة الموافق. ولا يجوز أن تكون هذه القيمة سالبةً. | تُمثِّل هذه القيمة عرض الإطار، ويمكن أن تكون إما قيمةً مطلقةً أو نسبيةً، والقيم النسبية تُشير إلى أبعاد الإطار نسبةً إلى عرض أو ارتفاع الصورة الموافق. ولا يجوز أن تكون هذه القيمة سالبةً. | ||
| − | === | + | === <code>[[CSS/number|<number>]]</code> === |
تُمثِّل هذه القيمة عدد المرات التي يجب فيها ضرب قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، ولا يجوز أن تكون هذه القيمة سالبةً. | تُمثِّل هذه القيمة عدد المرات التي يجب فيها ضرب قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، ولا يجوز أن تكون هذه القيمة سالبةً. | ||
| − | === | + | === <code>auto</code> === |
ستؤدي هذه القيمة إلى ضبط عرض الإطار لما يوافق العرض أو الارتفاع الفعلي للصورة المستخدم، وإذا لم يكن للصورة أبعاد فعلية فستؤخذ القيمة من القيمة المحسوبة للخاصية <code>[[CSS/border-width|border-width]]</code>. | ستؤدي هذه القيمة إلى ضبط عرض الإطار لما يوافق العرض أو الارتفاع الفعلي للصورة المستخدم، وإذا لم يكن للصورة أبعاد فعلية فستؤخذ القيمة من القيمة المحسوبة للخاصية <code>[[CSS/border-width|border-width]]</code>. | ||
| سطر 79: | سطر 80: | ||
</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-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-width CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-width CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 04:23، 19 مارس 2018
الخاصية border-image-width في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية border-image-width أكبر من قيمة الخاصية border-width، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).
بطاقة الخاصية
| القيمة الابتدائية | 1
|
|---|---|
| تُطبَّق على | جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية border-collapse إلى collapse.
|
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. |
/* border-image-width: all */
border-image-width: 3;
/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;
/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;
/* border-image-width: top right bottom left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
أمثلة
راجع صفحة border-image لأمثلة عن هذه الخاصية.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 15.0 | 15.0 | 11 | 15 | 6 |
البنية العامة
قد تأخذ هذه الخاصية قيمةً واحدةً أو قيمتين أو ثلاث قيم أو أربع قيم، ويمكن أن تكون القيمة إما طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto.
- إذا حُدِّدَت قيمة واحدة فستُطبَّق على الحواف الأربع جميعها.
- إذا حُدِّدَت قيمتين فسيُضبَط عرض الحواف الرأسية والأفقية (على التوالي وبالترتيب).
- إذا حُدِّدَت ثلاث قيم فسيُضبَط عرض الحافة العلوية والحواف الأفقية والحافة السفلية (على التوالي وبالترتيب).
- إذا حُدِّدَت أربع قيم فسيُضبَط عرض الحواف العلوية واليمينية والسفلية واليسارية (على التوالي وبالترتيب).
<length> أو <percentage>
تُمثِّل هذه القيمة عرض الإطار، ويمكن أن تكون إما قيمةً مطلقةً أو نسبيةً، والقيم النسبية تُشير إلى أبعاد الإطار نسبةً إلى عرض أو ارتفاع الصورة الموافق. ولا يجوز أن تكون هذه القيمة سالبةً.
<number>
تُمثِّل هذه القيمة عدد المرات التي يجب فيها ضرب قيمة الخاصية border-width، ولا يجوز أن تكون هذه القيمة سالبةً.
auto
ستؤدي هذه القيمة إلى ضبط عرض الإطار لما يوافق العرض أو الارتفاع الفعلي للصورة المستخدم، وإذا لم يكن للصورة أبعاد فعلية فستؤخذ القيمة من القيمة المحسوبة للخاصية border-width.
البنية الرسمية
border-image-width: [ <length-percentage> | <number> | auto ]{1,4};
حيث:
<length-percentage> = <length> | <percentage>
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-imageوهي:border-image-source، وborder-image-slice، وborder-image-outset، وborder-image-repeat. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color.