About the Outline-style in CSS

a outline (contour) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence. The Outline property sets the contour line around the element.

You must always declare the Outline-style property before the Outline-color property. An element can change the color of its outline only after it has obtained an outline.

Possible values are described:

None defaults. Defines no outlines.
Dotted defines a point-shaped outline.
Dashed defines the dashed outline.
Solid defines the solid outline.
Double defines a two-line outline. The width of the double line is equal to the value of Outline-width.
Groove defines a 3D groove profile. This effect depends on the Outline-color value.
Ridge defines a 3D convex groove profile. This effect depends on the Outline-color value.
Inset defines a 3D concave edge profile. This effect depends on the Outline-color value.
Outset defines a 3D convex edge profile. This effect depends on the Outline-color value.
inherit specifies that the outline style settings should be inherited from the parent element.

What is the outline control?

When focusing on a tag, there will be a dashed box around the area of the a tag, which is different from border, which does not occupy any width. When you cancel the focus, the dashed box disappears naturally. You can see it through a few versions of surfing, Firefox or IE. Safari, Opera, Goole browser and so on itself does not support this effect, so do not see.

Basically this is useless effect, in most cases we would like to not have this effect, so give a tag set outline:none; Unfortunately, IE6, 7 and the browser can not be implemented, only FF,IE8 in the outline: None will then cancel the focused dashed box.

How can I cancel this dashed box? There are three common methods:

1: Add JS control in a tag, when the A tag is focused, force cancel focus, this time a tag naturally will not have a dashed box.

<a href= "#" onfocus= "This.blur ();" > Testing </a>

The blur () is triggered when the focus is set, and the focus is forced to cancel. Nature is a proven one.

2: In a tag nested other tags, such as span or VAR, etc., put the content in the nested tag. At this point, click on the link, the focus is a sub-tag, nature will not focus on a tag, so can also avoid this problem.

3: Do not use a tag to do the link, using other tags, using JS to make hover effect, add Cursour:pointer in the CSS, set the mouse over the time-varying small hands. To the user is the illusion of the link. Use JS to do a click on the page jump and so on. The biggest disadvantage is that it is more user-friendly than the previous two Tanesashi.