خاصية لون مخطط CSS
مثال
عيّن لونًا للمخطط التفصيلي:
div {outline-color: coral;}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
المخطط التفصيلي هو خط يتم رسمه حول العناصر ، خارج الحدود ، لجعل العنصر "بارزًا".
outline-color
تحدد الخاصية لون المخطط التفصيلي .
ملاحظة: قم دائمًا بالإعلان عن خاصية نمط المخطط التفصيلي قبل
outline-color
الخاصية. يجب أن يكون للعنصر مخطط تفصيلي قبل تغيير لونه.
القيمة الافتراضية: | عكس إذا كان مدعوما ، أو currentcolor خلاف ذلك |
---|---|
وارث: | رقم |
متحرك: | نعم ، انظر الخصائص الفردية . اقرأ عن animatable |
الإصدار: | CSS2 |
بناء جملة JavaScript: | الكائن .style.outlineColor = "# FF0000" |
نصائح وملاحظات
ملاحظة: تختلف الخطوط العريضة عن الحدود ! على عكس الحد ، يتم رسم المخطط التفصيلي خارج حدود العنصر ، وقد يتداخل مع محتوى آخر. أيضًا ، المخطط التفصيلي ليس جزءًا من أبعاد العنصر ؛ لا يتأثر العرض والارتفاع الكلي للعنصر بعرض المخطط التفصيلي.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
ملاحظة: القيمة invert
غير مدعومة في أي متصفحات ، باستثناء Internet Explorer 8.
بنية CSS
outline-color: invert|color|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
عيّن لونًا للمخطط التفصيلي بقيمة HEX:
div {outline-color: #92a8d1;}
مثال
عيّن لونًا للمخطط التفصيلي بقيمة RGB:
div {outline-color: rgb(201, 76, 76);}
مثال
عيّن لونًا للمخطط التفصيلي بقيمة RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
مثال
عيّن لونًا للمخطط التفصيلي بقيمة HSL:
div {outline-color: hsl(89, 43%, 51%);}
مثال
عيّن لونًا للمخطط التفصيلي بقيمة HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
الصفحات ذات الصلة
دروس CSS: مخطط CSS
مرجع CSS: خاصية المخطط التفصيلي
مرجع DOM HTML: خاصية outlineColor