الفرق بين المراجعتين ل"CSS/border-color"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-color</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-color</code>}}</noinclude> | ||
| − | الخاصية <code>border-color</code> المختصرة في CSS تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (<code>[[CSS/border-top-color|border-top-color]]</code>) والأيمن (<code>[[CSS/border-right-color|border-right-color]]</code>) والسفلي (<code>[[CSS/border-bottom-color|border-bottom-color]]</code>) والأيسر (<code>[[CSS/border-left-color|border-left-color]]</code>). | + | الخاصية <code>border-color</code> المختصرة في CSS تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (<code>[[CSS/border-top-color|border-top-color]]</code>) والأيمن (<code>[[CSS/border-right-color|border-right-color]]</code>) والسفلي (<code>[[CSS/border-bottom-color|border-bottom-color]]</code>) والأيسر (<code>[[CSS/border-left-color|border-left-color]]</code>). |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 49: | سطر 28: | ||
*<code>[[CSS/border-top-color|border-top-color]]</code>: اللون المحسوب. | *<code>[[CSS/border-top-color|border-top-color]]</code>: اللون المحسوب. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* تطبيق اللون على جميع الأوجه */ | ||
| + | border-color: red; | ||
| + | border-color: #ffbb00; | ||
| + | border-color: rgb(255, 0, 0); | ||
| + | border-color: hsla(100%, 50%, 25%, 0.75); | ||
| + | border-color: currentcolor; | ||
| + | border-color: transparent; | ||
| + | |||
| + | /* vertical | horizontal */ | ||
| + | border-color: red #f015ca; | ||
| + | |||
| + | /* top | horizontal | bottom */ | ||
| + | border-color: red yellow green; | ||
| + | |||
| + | /* top | right | bottom | left */ | ||
| + | border-color: red yellow green blue; | ||
| + | |||
| + | /* قيم عامة */ | ||
| + | border-color: inherit; | ||
| + | border-color: initial; | ||
| + | border-color: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
سنعرض في هذا المثال كيفية استخدام الخاصية <code>border-color</code> لتعيين لون الإطار بتحديد قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم، وذلك على عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>. شيفرة HTML:<syntaxhighlight lang="html"> | سنعرض في هذا المثال كيفية استخدام الخاصية <code>border-color</code> لتعيين لون الإطار بتحديد قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم، وذلك على عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>. شيفرة HTML:<syntaxhighlight lang="html"> | ||
| − | <div class="one-value"> | + | <div class="one-value"><code>border-color: #006699;</code></div> |
| − | border-color: #006699; | + | <div class="two-values"><code>border-color: #006699 salmon;</code></div> |
| − | </div> | + | <div class="three-values"><code>border-color: #006699 rgb(150, 125, 175) salmon;</code></div> |
| − | <div class="two-values"> | + | <div class="four-values"><code>border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%);</code></div> |
| − | border-color: #006699 salmon; | + | |
| − | </div> | ||
| − | <div class="three-values"> | ||
| − | border-color: #006699 rgb(150, 125, 175) salmon; | ||
| − | </div> | ||
| − | <div class="four-values"> | ||
| − | border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%); | ||
| − | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
div { | div { | ||
| سطر 74: | سطر 68: | ||
.one-value { | .one-value { | ||
| − | border-color: # | + | border-color: #205a23; |
} | } | ||
.two-values { | .two-values { | ||
| − | border-color: # | + | border-color: #205a23 salmon; |
} | } | ||
.three-values { | .three-values { | ||
| − | border-color: # | + | border-color: #205a23 rgb(40, 131, 44) salmon; |
} | } | ||
.four-values { | .four-values { | ||
| − | border-color: # | + | border-color: #205a23 rgb(40, 131, 44) salmon hsl(39, 100%, 50%); |
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 110: | سطر 104: | ||
* عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة). | * عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة). | ||
| − | === | + | === <code>[[CSS/color value|<color>]]</code> === |
قيمة لونية <code>[[CSS/color value|<color>]]</code> تُحدِّد ما هو لون الإطار. | قيمة لونية <code>[[CSS/color value|<color>]]</code> تُحدِّد ما هو لون الإطار. | ||
| سطر 118: | سطر 112: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>border-color</code> وهي: <code>[[CSS/border-top-color|border-top-color]]</code>، و <code>[[CSS/border-right-color|border-right-color]]</code>، و <code>[[CSS/border-bottom-color|border-bottom-color]]</code>، و <code>[[CSS/border-left-color|border-left-color]]</code>. | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-radius|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>. | ||
| + | *صفحة الخاصية <code>[[CSS/color|color]]</code> والقيمة اللونية <code>[[CSS/color value|<color>]]</code>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-color CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-color CSS Backgrounds and Borders Module Level 3]. | ||
المراجعة الحالية بتاريخ 03:43، 19 مارس 2018
الخاصية border-color المختصرة في CSS تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (border-top-color) والأيمن (border-right-color) والسفلي (border-bottom-color) والأيسر (border-left-color).
بطاقة الخاصية
| القيمة الابتدائية | لكل قيمة مختصرة:
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | لكل قيمة مختصرة:
|
/* تطبيق اللون على جميع الأوجه */
border-color: red;
border-color: #ffbb00;
border-color: rgb(255, 0, 0);
border-color: hsla(100%, 50%, 25%, 0.75);
border-color: currentcolor;
border-color: transparent;
/* vertical | horizontal */
border-color: red #f015ca;
/* top | horizontal | bottom */
border-color: red yellow green;
/* top | right | bottom | left */
border-color: red yellow green blue;
/* قيم عامة */
border-color: inherit;
border-color: initial;
border-color: unset;
أمثلة
سنعرض في هذا المثال كيفية استخدام الخاصية border-color لتعيين لون الإطار بتحديد قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم، وذلك على عناصر <div>. شيفرة HTML:
<div class="one-value"><code>border-color: #006699;</code></div>
<div class="two-values"><code>border-color: #006699 salmon;</code></div>
<div class="three-values"><code>border-color: #006699 rgb(150, 125, 175) salmon;</code></div>
<div class="four-values"><code>border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%);</code></div>
شيفرة CSS:
div {
padding: 1.5em;
margin: 1.5em;
border-style: solid;
border-width: 1em;
}
.one-value {
border-color: #205a23;
}
.two-values {
border-color: #205a23 salmon;
}
.three-values {
border-color: #205a23 rgb(40, 131, 44) salmon;
}
.four-values {
border-color: #205a23 rgb(40, 131, 44) salmon hsl(39, 100%, 50%);
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4 | 3.5 | 1.0 |
البنية العامة
يمكن تحديد قيمة واحدة للخاصية border-color أو قيمتين أو ثلاث قيم أو أربع قيم.
- عند تحديد قيمة واحدة، فستُطبّق على جميع أوجه الإطار.
- عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الإطارين العلوي والسفلي، والقيمة الثانية على الإطارين الأيمن والأيسر.
- عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الإطار العلوي، والقيمة الثانية على الإطارين الأيمن والأيسر، والقيمة الثالثة على الإطار السفلي.
- عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة).
<color>
قيمة لونية <color> تُحدِّد ما هو لون الإطار.
البنية الرسمية
border-color: <color>{1,4};
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-colorوهي:border-top-color، وborder-right-color، وborder-bottom-color، وborder-left-color. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style. - صفحة الخاصية
colorوالقيمة اللونية<color>.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.