الفرق بين المراجعتين ل"CSS/border-right-width"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-right-width</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-right-width</code>}}</noinclude> | ||
| − | الخاصية <code>border-right-width</code> في CSS تضبط عرض الإطار الأيمن للعنصر. | + | الخاصية <code>border-right-width</code> في CSS تضبط عرض الإطار الأيمن للعنصر. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|الطول المطلق، أو 0 إذا ضُبِطَت الخاصية <code>[[CSS/border-right-style|border-right-style]]</code> إلى <code>none</code> أو <code>hidden</code>. | |الطول المطلق، أو 0 إذا ضُبِطَت الخاصية <code>[[CSS/border-right-style|border-right-style]]</code> إلى <code>none</code> أو <code>hidden</code>. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* كلمات مفتاحية */ | ||
| + | border-right-width: thin; | ||
| + | border-right-width: medium; | ||
| + | border-right-width: thick; | ||
| + | |||
| + | /* <length> أطوال */ | ||
| + | border-right-width: 10em; | ||
| + | border-right-width: 3vmax; | ||
| + | border-right-width: 6px; | ||
| + | /* قيم عامة */ | ||
| + | border-right-width: inherit; | ||
| + | border-right-width: initial; | ||
| + | border-right-width: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| − | سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>[[CSS/border-right-color|border-right-color]]</code>) | + | سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>[[CSS/border-right-color|border-right-color]]</code>) أخضر، وعرضه (<code>border-right-width</code>) يساوي <code>4px</code> وشكله (<code>[[CSS/border-right-style|border-right-style]]</code>) منقط. شيفرة HTML:<syntaxhighlight lang="html"> |
| − | <div> | + | <div>لهذا العنصر إطارٌ على حافته اليمينية</div> |
| − | + | ||
| − | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
div { | div { | ||
border-right-style: dotted; | border-right-style: dotted; | ||
border-right-width: 4px; | border-right-width: 4px; | ||
| − | border-right-color: | + | border-right-color: green; |
padding: 0.5em; | padding: 0.5em; | ||
} | } | ||
| سطر 66: | سطر 66: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code><br-width></code> === |
تُعرِّف هذه القيمة عرض الإطار، وإما أن تكون طولًا <code>[[CSS/length|<length>]]</code> غير سالب، أو كلمةً محجوزةً؛ ويُسمَح باستخدام الكلمات المحجوزة الآتية: | تُعرِّف هذه القيمة عرض الإطار، وإما أن تكون طولًا <code>[[CSS/length|<length>]]</code> غير سالب، أو كلمةً محجوزةً؛ ويُسمَح باستخدام الكلمات المحجوزة الآتية: | ||
| سطر 102: | سطر 102: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-right|border-right]]</code> وهي: <code>[[CSS/border-right-color|border-right-color]]</code>، و <code>[[CSS/border-right-style|border-right-style]]</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>. | ||
| + | *ضبط صورة للإطار باستخدام الخاصية <code>[[CSS/border-image|border-image]]</code>. | ||
| + | *الخاصية <code>[[CSS/color|color]]</code> التي تضبط لون العنصر، والقيمة اللونية <code>[[CSS/color value|<color>]]</code>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-border-width CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-border-width CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 05:38، 19 مارس 2018
الخاصية border-right-width في CSS تضبط عرض الإطار الأيمن للعنصر.
بطاقة الخاصية
| القيمة الابتدائية | medium
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | الطول المطلق، أو 0 إذا ضُبِطَت الخاصية border-right-style إلى none أو hidden.
|
/* كلمات مفتاحية */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* <length> أطوال */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* قيم عامة */
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;
أمثلة
سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <div> لونه (border-right-color) أخضر، وعرضه (border-right-width) يساوي 4px وشكله (border-right-style) منقط. شيفرة HTML:
<div>لهذا العنصر إطارٌ على حافته اليمينية</div>
شيفرة CSS:
div {
border-right-style: dotted;
border-right-width: 4px;
border-right-color: green;
padding: 0.5em;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4.0 | 3.5 | 1.0 |
البنية العامة
<br-width>
تُعرِّف هذه القيمة عرض الإطار، وإما أن تكون طولًا <length> غير سالب، أو كلمةً محجوزةً؛ ويُسمَح باستخدام الكلمات المحجوزة الآتية:
thin |
|
إطار رفيع |
medium |
|
إطار متوسط |
thick |
|
إطار ثخين |
ملاحظة: لأنَّ المواصفة لا تُحدِّد ما هي القيمة الدقيقة المرتبطة بكل كلمة محجوزة، فقد تختلف النتيجة باختلاف المتصفح، لكن مع ذلك، ستتبع هذه القيم للعلاقة thin ≤ medium ≤ thick، وستكون القيم متناسقة فيما بينها في المستند.
البنية الرسمية
border-right-width: <br-width>;
حيث:
<br-width> = <length> | thin | medium | thick
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-rightوهي:border-right-color، وborder-right-style. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color. - ضبط صورة للإطار باستخدام الخاصية
border-image. - الخاصية
colorالتي تضبط لون العنصر، والقيمة اللونية<color>.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.