مخطط CSS
المخطط التفصيلي هو خط مرسوم خارج حدود العنصر.
مخطط CSS
المخطط التفصيلي هو خط يتم رسمه حول العناصر ، خارج الحدود ، لجعل العنصر "بارزًا".
يحتوي CSS على خصائص المخطط التفصيلي التالية:
-
outline-style
-
outline-color
-
outline-width
-
outline-offset
-
outline
ملاحظة: يختلف المخطط التفصيلي عن الحدود ! على عكس الحد ، يتم رسم المخطط التفصيلي خارج حدود العنصر ، وقد يتداخل مع محتوى آخر. أيضًا ، المخطط التفصيلي ليس جزءًا من أبعاد العنصر ؛ لا يتأثر العرض والارتفاع الكلي للعنصر بعرض المخطط التفصيلي.
نمط مخطط CSS
تحدد الخاصية نمط outline-style
المخطط التفصيلي ، ويمكن أن تحتوي على إحدى القيم التالية:
dotted
- يحدد مخططًا منقطًاdashed
- يحدد مخططًا متقطعًاsolid
- يحدد الخطوط العريضة الصلبةdouble
- يحدد مخططًا مزدوجًاgroove
- Defines a 3D grooved outlineridge
- Defines a 3D ridged outlineinset
- Defines a 3D inset outlineoutset
- Defines a 3D outset outlinenone
- Defines no outlinehidden
- Defines a hidden outline
The following example shows the different outline-style
values:
Example
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style
property is set!