1. Concept
An outline is a line drawn around an element, located outside the edge of the border, to highlight the element.
For example: when we usually read content in the browser, when the mouse clicks to focus an a tag link or an input radio button, the element will be surrounded by an outline dotted box. This outline dotted box is the outline.
By default, when you click the a tag, input, or add a mouse click event, the browser will leave an outline frame (blue under chrome). However, these default outline frames sometimes affect the appearance and destroy the overall effect of the front-end page. We don't really want to keep them. So how to remove the browser's default outline frame, or change the default outline frame effect?
The CSS outline property specifies the style, color, and width of an element's outline.
Outlines and borders look very similar, but there are differences between them, for example:
(1) The style, width, and color of the border in the four directions of the element can be set independently, but the width, style, and color of the outline in the four directions of the element are the same and cannot be set individually;
(2) The width of the border will directly affect the size of the element, while the outline will not occupy page space and will not affect the layout of the page, but the outline will overlap with other elements on the page;
(3) In addition to overlapping the sound of surrounding elements, the outline has no effect on surrounding elements;
(4) The border is part of the element's size, but the outline is not, which means that no matter what the width of the outline is, the size of the element will not change;
(5) The outline can be non-rectangular, but you cannot directly create a circular outline.
2. Properties
You can use the following properties to set an outline for an element:
(1) Outline: Set all outline attributes in one statement, the abbreviation attribute of outline. You can use the outline attribute to set the above three outline attributes at the same time;
outline-coloroutline-styleoutline-widthinherit
●Outline values can be listed in any order, and these values can be ignored.
●JavaScript syntax
object.style.outline=#0000FFdottedthin
(2) outline-color: Set the color of the outline;
color-namehex-numberrgb-numberinvertinherit
●Note: Please always declare the outline-style attribute before the outline-color attribute. The color of an element's outline can only be changed after it has obtained its outline.
●The outline-color attribute sets the color of the visible part of the entire outline of an element.
●JavaScript syntax
object.style.outlineColor=#0000FF
(3) outline-style: Set the style of the outline;
nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit
● The outline-style attribute is used to style the entire outline of an element. Style cannot be none, otherwise the outline will not appear.
●Note: Please always declare the outline-style attribute before the outline-color attribute. The color of an element's outline can only be changed after it has obtained its outline.
●Contour lines do not take up space and are not necessarily rectangular.
●JavaScript syntax
object.style.outlineStyle=dotted
(4) outline-width: Set the width of the outline;
thinmediumthicklengthinherit
●Note: Please always declare the outline-style attribute before the outline-width attribute. The color of an element's outline can only be changed after it has obtained its outline.
●Width is not allowed to be a negative number
●JavaScript syntax
object.style.outlineWidth=thin
(5) outline-offset: Set the distance between the outline and the border
Example:
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp Everyone is welcome to learn programming</p></body></html>Running results:
