The use of outline in CSS

Source: Internet
Author: User

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

The use of outline in CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.