The use of outline in CSS

The Outline property in CSS is a line that is drawn around the element, at the periphery of the edge of the border, and can act as a prominent element.

For example: In a browser, when the mouse clicks or uses the TAB key to get a link or a radio to focus, the element will be surrounded by a dashed outline. This contour dashed box is outline.

Outline can set the following properties in order

Outline-color : Sets the color of the element outline, which is similar in value to Border-color. Valid only if Outline-style is not a none. The default is transparent.

Outline-style : Sets the format of the element outline, which is similar in value to Border-style, but has no hidden value. Default is None, no contour.

outline-width: Sets the width of the element outline, which is similar in value to Border-width. Valid only if Outline-style is not a none.

If you do not set one of these values, there will be no problems, such as Outline:solid #ff0000; is permissible.

Second, the difference between outline and border

1.outline is not space-saving, without adding extra width or height
2.outline may be non-rectangular

Third, the hierarchical Order of outline

1, outline in different format context rendering is not the same, in block-level elements can be covered up and down on both sides of the content. The inline element can overwrite the above content.

2, usually outline will be in accordance with the previous order of coverage in front of the normal display (in the same case, as in the document flow is not floating, or are floating, the positioning of the Z-index does not count)

3. If the page has a floating element, the outline of the floating element is displayed first, and then the outline of the normal document flow (the outline of the floating element is overwritten by outline with no floating element)

4, if the page has a positioning element (Relative,absolute,fixed does not include static), after the display of the floating element, the normal flow of the document, and then display the positioned elements (not set Z-index case, the setting is equal to the browser and other commands), Of course, the elements of the positioning can be used in the Z-index property to move the elements back and forth, but now the discussion is not set Z-index under the default browser to outline display situation.

Reference: CSS in outline http://www.studyofnet.com/news/995.html

The use of outline in CSS