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

Editor to share with you how to use the css profile properties, I hope you will gain something after reading this article, let's discuss it together!

What is the css outline attribute

The outline is a line drawn around the element, located on the periphery of the edge of the border, and can highlight the element.

For example: when we usually read the content in the browser, when the mouse clicks to give focus to an a tag link or an input radio box, the element will be surrounded by an outline dotted frame. The dotted frame of the outline is the outline.

By default, when you click the a tag, input, or add a mouse click event, the browser leaves an outline box (blue under the chrome). However, these default outline frames sometimes affect the appearance and destroy the overall effect of the front-end page, and we don't really want to keep it. So how to remove the default outline frame of the browser, or change the default outline frame effect?

The outline property of css allows us to change the default outline dashed wireframe effect. The outline attribute has the following related attributes:

Outline: set all outline properties in one declaration

Outline-style: styling outlines

Outline-width: sets the width of the outline

Outline-color: setting the color of the outline

Outline-offset: offset the profile and draw at the edge of the border

The first related attribute, outline, is in sketch form, which is in the following format:

Outline:outline-color | | outline-style | | outline-width

Let's not set the relevant style of the outline one by one, we can complete the setting at one time.

Let's look at the use of the outline attribute of css with the following example:

If you want the link to be more eye-catching when it comes to focus, you can set the outline to red, as follows:

Outline-outline

.a {outline:5pxsolidred;}

I am the connection by default

I am a test connection, it will be popular.

If you simply want to remove the outline lines on the beautiful Tab, the outline property can be set as follows:

.tab {outline:none;./*otherproperties*/}

From the above example, we can see that the outline is similar to the border, but the outline and border are similar but different.

2. The difference between outline and border

Outline does not take up space and does not add extra width or height; border takes up width; so outline does not affect the size or position of elements as border does.

It is possible that the outline is non-rectangular; the border is the normal border.

Outline is designed for elements such as links, form controls, and ImageMap; border can be applied to almost all tangible html elements.

After reading this article, I believe you have a certain understanding of "how to use css profile attributes". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

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.