Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use css3 outline attributes to design element outlines", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use css3 outline attributes to design element contours" this article.

Css3 defines contour lines

The outline attribute defines the outer contour of a block element.

Draw an outline around the element to highlight the element. For example, you can add an outline around a radio radio box that does not have a border to make it more prominent on the page, or you can add an outline to only one checkbox in a group of radio radio boxes to distinguish it from others.

The initial value of the outline attribute depends on the specific element, and it applies to all elements. The values are briefly described as follows.

Defines the outline border color

Defines the outline border outline

Defines the width of the outline border

A numeric value that defines the offset position of the outline border.

Inherit: inherits by default.

The outer contour may be non-rectangular. For example, if an element is divided into several lines, then the outer contour line is at least the outer outline that can contain all the boxes of the element. Unlike the frame, the beginning and end of the outline wireframe is not open, it is always completely closed.

CSS3 derives four outer contour attributes based on the outline attribute, which is briefly described below.

Outline-color: defines the outline border color. The outline-color attribute accepts all colors, including the keyword invert. Invert should reverse the pixel color on the screen. This technique ensures that the focus frame is visible, regardless of the background.

What is color.

Outline-style: defines the outline border outline. The outline-style property accepts the same values and usage as the border-style property, such as none, dotted, dashed, solid, double, groove, ridge, inset, and outset. However, the hidden property

The value is not a legal outer outline style.

Outline-width: defines the width of the outline border. The outline-width property accepts the same value and usage as the border-width property.

Outline-offset: a numeric value that defines the offset of the outline border.

The outline property is a composite property that can set the values of the outline-style, outline-width, and outline-color properties. Note that the outer contours are the same on all sides, unlike the border, which has no outline-top or outline-left attributes. CSS does not support multiple definitions

The outer contours that cover each other do not define how to define the outer contours of boxes that are partially invisible because they are behind other elements.

Focus is the topic of user interaction in the document (such as entering text, selecting a button, etc.), and the graphical user interface can use the outer outline around the element to tell the user which element on the page has gained focus. These outer contour lines are different from any border style, toggling the display and non-display of outer contour lines will not change the document flow. If the browser supports interactive media groups, it must track the focus location and must display the focus. This can be done through the combined use of dynamic outer contours and: focus pseudo classes.

Take a look at the following example, draw an outline around a thick solid line when an element gets focus, and draw a different color when it is active

Thick solid outer contours to improve user interaction, as shown in the figure:

Css3 defines the width of the contour:

The outline-width property can set the width of the outer contour line separately.

The initial value of the outline-width attribute is medium, which applies to all elements. The values are briefly described as follows.

Thin: defines thin contours.

Medium: defines a medium profile.

Thick: defines a thick outline.

A value that defines the thickness of the outline

Inherit: inherits by default.

Css3 defines contour line styl

The outline-style property sets the style of the outer contour line.

The initial value of the outline-style attribute is none, which applies to all elements. The values are briefly described as follows.

Auto: automatically set according to the browser.

The border style is used Includes none, dotted, dashed, solid, double, groove, mset and outset.

Inherit: inherits by default.

The browser compatibility of this property is the same as the outline-width property.

Css3 defines the contour color

The outline- color property sets the color of the outer contour line separately.

The initial value of the outline-color attribute is invert, which applies to all elements. The values are briefly described as follows.

: it can be a color name, such as a red; function value, such as rgb (255j0re0), or a hexadecimal value, such as # ff0000.

Invert: performs color reversal (inverse color). In this way, the outer contours of the bowl are visible in different background colors.

Inherit: inherits by default.

Css3 defines contour displacement

The outline-offset property can set the offset position of the outer contour line separately.

The outline-offset attribute has an initial value of 0 and applies to all elements. The values are briefly described as follows.

Defines the value of the profile distance from the container

Inherit: inherits by default.

The browser compatibility of this property is the same as the outline-width property.

The above is all the content of the article "how to use css3 outline attributes to design element outlines". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.