Detailed introduction to outline:none in CSS

黄舟
Release: 2017-07-24 09:43:17
Original
14022 people have browsed it

When an element gets focus, the focus box is 0.
For example, on the current webpage, when you use the tab key to switch, there will be a dotted box (or high-definition box) outside the text link, search box, button, etc. Bright frame), the current element has gained focus, and you can operate on it.
This function is generally prepared for users who use keyboard operations.
For some links, such as a picture link, you can use this method if you don’t want a dotted frame to ruin the design.

It is recommended not to remove it and only use it in places that affect the aesthetics of the design. After all, this focus box is very helpful for keyboard users.

Definition and Usage
The outline-style attribute is used to style the entire outline of an element. The style cannot be none, otherwise the outline will not appear.

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.

Note: 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.

Note: Contour lines do not occupy space and are not necessarily rectangular.

Default value: none

Set the outline style:

p { outline-style:dotted; }
Copy after login

Browser support
All major browsers support the outline-style attribute.

Internet Explorer supports the outline-style attribute only when !DOCTYPE is specified.
Possible values
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.
outset 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.

The above is the detailed content of Detailed introduction to outline:none in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!