About outline-style in CSS

outline (Outline) is a line drawn around an element, located outside the edge of the border, which can highlight the element. The outline attribute sets the outline around the element.

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.

Possible value description:

none Default. Define no outline.
dotted defines the dotted outline.
dashed defines the dashed outline.
solid defines a solid outline.
double defines a double line outline. The width of the double line is equal to the value of outline-width.
groove defines the 3D groove profile. This effect depends on the outline-color value.
ridge defines the 3D groove profile. This effect depends on the outline-color value.
inset defines the 3D concave edge profile. This effect depends on the outline-color value.
outline defines the 3D convex edge outline. This effect depends on the outline-color value.
inherit specifies that the outline style settings should be inherited from the parent element .

What exactly does outline control?

When focusing on the a tag, there will be a dotted box around the area of ​​the a tag. This box is different from the border in that it does not occupy any width. When you cancel the focus, the dotted box will disappear naturally. You can see it through several versions of Aoyou, Firefox or IE. However, Safari, Opera, Goole browsers, etc. do not support this effect, so they cannot be seen.

Basically this is a useless effect. In most cases we hope not to have this effect, so we set outline:none for the a tag; unfortunately, ie6, It cannot be implemented in 7 and Aoyou browsers. Only ff and ie8 will cancel the focused dotted frame after adding outline:none.

How can I cancel this dotted box? There are three commonly used methods:

1: Add js control to the a tag. When the a tag is focused, the focus is forced to be canceled. At this time, the a tag will naturally not have a dotted frame.

<a href="#" onfocus="this.blur();">测试</a>

Here, blur() is triggered when the focus is set; to force the focus to be canceled. Naturally, it’s tried and true.

2: Nest other tags in the a tag, such as span or var, etc., and put the content in the nested tag. At this time, clicking this link will focus on the sub-tag of a, and will naturally not focus on the a tag, so this problem can be avoided.

3: Instead of using the a tag as a link, use other tags, use js to create a hover effect, add cursour:pointer to css; set it to make the hand smaller when the mouse is above it. Give users the illusion of a link. Use js to do page jumps when clicked, etc. The biggest disadvantage is that it is much less user-friendly than the first two.

The above is the detailed content of About outline-style in CSS. For more information, please follow other related articles on the PHP Chinese website!