الفرق بين المراجعتين ل"CSS/border-top-color"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (←انظر أيضًا: خطأ مطبعي) |
|||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-color</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-color</code>}}</noinclude> | ||
| − | الخاصية <code>border-top-color</code> في CSS تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>[[CSS/border-color|border-color]]</code> أو <code>[[CSS/border-top|border-top]]</code>. | + | الخاصية <code>border-top-color</code> في CSS تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>[[CSS/border-color|border-color]]</code> أو <code>[[CSS/border-top|border-top]]</code>. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|اللون المحسوب. | |اللون المحسوب. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* <color> قيم */ | ||
| + | border-top-color: red; | ||
| + | border-top-color: #ffbb00; | ||
| + | border-top-color: rgb(255, 0, 0); | ||
| + | border-top-color: hsla(100%, 50%, 25%, 0.75); | ||
| + | border-top-color: currentcolor; | ||
| + | border-top-color: transparent; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | border-top-color: inherit; | ||
| + | border-top-color: initial; | ||
| + | border-top-color: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| − | سنضبط في المثال الآتي إطارًا علويًا لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>border-top-color</code>) | + | سنضبط في المثال الآتي إطارًا علويًا لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>border-top-color</code>) أخضر، وعرضه (<code>[[CSS/border-top-width|border-top-width]]</code>) يساوي <code>4px</code> وشكله (<code>[[CSS/border-top-style|border-top-style]]</code>) منقط. شيفرة HTML:<syntaxhighlight lang="html"> |
| − | <div> | + | <div>لهذا العنصر إطارٌ على حافته العلوية</div> |
| − | |||
| − | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
div { | div { | ||
border-top-style: dotted; | border-top-style: dotted; | ||
border-top-width: 4px; | border-top-width: 4px; | ||
| − | border-top-color: | + | border-top-color: green; |
padding: 0.5em; | padding: 0.5em; | ||
} | } | ||
| سطر 67: | سطر 66: | ||
تقبل الخاصية <code>border-top-color</code> قيمةً واحدةً. | تقبل الخاصية <code>border-top-color</code> قيمةً واحدةً. | ||
| − | === | + | === <code>[[CSS/color value|<color>]]</code> === |
لون الإطار السفلي. | لون الإطار السفلي. | ||
| سطر 75: | سطر 74: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-top|border-top]]</code> وهي: <code>[[CSS/border-top-width|border-top-width]]</code>، و <code>[[CSS/border-top-style|border-top-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/border-radius|border-radius]]</code>، وللأركان العلوية <code>[[CSS/border-top-left-radius|border-top-left-radius]]</code> و <code>[[CSS/border-top-right-radius|border-top-right-radius]]</code>. | ||
| + | *الخاصية <code>[[CSS/color|color]]</code> التي تضبط لون العنصر، والقيمة اللونية <code>[[CSS/color value|<color>]]</code>. | ||
| + | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-top-color CSS Backgrounds and Borders Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-top-color CSS Backgrounds and Borders Module Level 3]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/box.html#border-color-properties CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/box.html#border-color-properties CSS Level 2 (Revision 1)]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Border]] | + | [[تصنيف:CSS Border|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 05:51، 19 مارس 2018
الخاصية border-top-color في CSS تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل border-color أو border-top.
بطاقة الخاصية
| القيمة الابتدائية | currentcolor
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | اللون المحسوب. |
/* <color> قيم */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentcolor;
border-top-color: transparent;
/* القيم العامة */
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;
أمثلة
سنضبط في المثال الآتي إطارًا علويًا لعناصر <div> لونه (border-top-color) أخضر، وعرضه (border-top-width) يساوي 4px وشكله (border-top-style) منقط. شيفرة HTML:
<div>لهذا العنصر إطارٌ على حافته العلوية</div>
شيفرة CSS:
div {
border-top-style: dotted;
border-top-width: 4px;
border-top-color: green;
padding: 0.5em;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 4 | 3.5 | 1.0 |
البنية العامة
تقبل الخاصية border-top-color قيمةً واحدةً.
<color>
لون الإطار السفلي.
البنية الرسمية
border-top-color: <color>;
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
border-topوهي:border-top-width، وborder-top-style. - صفحة الخاصيات التي تضبطها الخاصية المختصرة
borderوهي:border-width، وborder-style، وborder-color. - ضبط صورة للإطار باستخدام الخاصية
border-image. - الأركان المدورة
border-radius، وللأركان العلويةborder-top-left-radiusوborder-top-right-radius. - الخاصية
colorالتي تضبط لون العنصر، والقيمة اللونية<color>.
مصادر ومواصفات
- مواصفة CSS Backgrounds and Borders Module Level 3.
- مواصفة CSS Level 2 (Revision 1).