CSS Outline (Outline)

(outline) The outline line is a line drawn outside the edge of the element (such as buttons, active form fields, etc.) to make it stand out.

Outline (Outline) VS Border (Border)

The outline is usually used to highlight elements. The outline looks very similar to the border at first glance, but it is different in the following aspects:

• The outline does not occupy space because they are always placed at the top of the element box, which may cause them to overlap with other elements on the page.

• Unlike the border, the outline does not allow us to set different widths for each edge, nor can we set different colors and styles for each edge. The outline is the same in all aspects.

• The outline has no effect on the surrounding elements except for overlapping.

• Unlike the border, the outline does not change the size or position of the element.

• The outline may not be rectangular.

but in the case-width Outline width property

but in the case-The width attribute specifies the width of the outline to be added to the element. Its value should be a CSS length (px, pt, em, etc.) or one of the allowed keywords, but percentages or negative values are not allowed. Just likeborder-widthproperty is the same.

p {
　　　　but in the case-width: thick;
}

but in the case-style Outline style property

This outline-style attribute sets the style of the outline, such as: solid, dotted, etc.

This property can take one of the following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge, and solid. Just likeborder-outlinevalues are the same.

p {
　　　　but in the case-style: double;
}

but in the case-color Outline color property

but in the case-The color attribute sets the outline color.

p {
　　　　but in the case-style: solid;
　　　　but in the case-color:　#0000ff;
}

color: black;-You can also set outline

Style property first sets the outline.

Outline Shorthand Property-The CSS outline property is a shorthand property that sets one or more individual outline properties, outline-style, outline-width and outline

p {
　　　　outline:　5color in a single rule.9px solid #32acd
}

;

color.5In the following example, the outline will be a width of

p {
　　　　px black solid:
　　　　outline:　5color: black;
}

px solid;but in the case-outlinestyle-The default value of styleproperty is none. If the value is omitted, no outline will be displayed because outline

In the following example, there will be no outline:

p {
　　　　outline:　5px #00ff00;
}

Remove the dashed line around the active link

The outline property is widely used to remove the dashed line around the active link.

a, a:acive, a:focus {
　　　　outline: none;　/*　Works in Firefox, Chrome, IE8　and above　*/
}