خاصية عرض مخطط CSS
مثال
قم بتعيين عرض المخطط التفصيلي:
div {outline-width: thick;}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
المخطط التفصيلي هو خط يتم رسمه حول العناصر ، خارج الحدود ، لجعل العنصر "بارزًا".
يحدد outline-width
عرض المخطط التفصيلي.
ملاحظة: قم دائمًا بالإعلان عن خاصية نمط المخطط التفصيلي قبل
outline-width
الخاصية. يجب أن يكون للعنصر مخطط تفصيلي قبل تغيير عرضه.
القيمة الافتراضية: | متوسط |
---|---|
وارث: | رقم |
متحرك: | نعم ، انظر الخصائص الفردية . اقرأ عن animatable |
الإصدار: | CSS2 |
بناء جملة JavaScript: | الكائن .style.outlineWidth = "12px" |
نصائح وملاحظات
ملاحظة: تختلف الخطوط العريضة عن الحدود ! على عكس الحد ، يتم رسم المخطط التفصيلي خارج حدود العنصر ، وقد يتداخل مع محتوى آخر. أيضًا ، المخطط التفصيلي ليس جزءًا من أبعاد العنصر ؛ لا يتأثر العرض والارتفاع الكلي للعنصر بعرض المخطط التفصيلي.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
outline-width | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
بنية CSS
outline-width: medium|thin|thick|length|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
medium | Specifies a medium outline. This is default | |
thin | Specifies a thin outline | |
thick | Specifies a thick outline | |
length | Allows you to define the thickness of the outline. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
اضبط عرض المخطط التفصيلي على متوسط (هذا افتراضي):
div {outline-width: medium;}
مثال
اضبط عرض المخطط التفصيلي على رفيع:
div {outline-width: thin;}
مثال
اضبط عرض المخطط التفصيلي على 1 بكسل:
div {outline-width: 1px;}
مثال
اضبط عرض المخطط التفصيلي على 15 بكسل:
div {outline-width: 15px;}
الصفحات ذات الصلة
دروس CSS: مخطط CSS
مرجع CSS: خاصية المخطط التفصيلي
مرجع DOM HTML: الخاصية outlineWidth