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

Most people do not understand the knowledge points of this article "how to use outline in css", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use outline in css" article.

This is how Spec describes it.

Action

Used to create the outline of a visual object (the border-box of an element), such as a form button outline, and so on.

Different from border

1. Outline does not take up document space.

2. Outline is not necessarily a rectangle.

Specific attribute description

/ * Contour color

* invert is represented as a color reversal, even if the outline is visible in different background colors

, /

Outline-color:invert | inherit

/ * Contour style * /

Outline-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

/ * Contour width * /

Outline-width:medium | thin | thick | | inherit

/ * set the color, style and width of the contour line at once * /

Outline:

/ * the offset of the contour line. If the offset of the contour line is greater than 0, the contour will be enlarged, and if it is less than 0, the contour will shrink * /

Outline-offset:0px

The devil is in the details

Compatibility

Outline is the CSS2.1 specification, so IE6/7/8 (Q) does not support it, and writing the correct DOCTYPE under IE8 supports the outline attribute.

Outline-offset is not supported under IE.

Hide outline under IE6/7/8 (Q)

To hide the outline effect under IE6/7/8 (Q), add the hideFocus feature to the element.

The difference between outline:0 and outline:none

Execute the following code under Chrome

.outline0 {

Outline:0

}

. outline-none {

Outline:none

}

Outline:0

Outline:none

Const$=document.querySelector.bind (document)

Constprint=console.log.bind (console)

ConstcssProps= ["outline-width", "outline-style", "outline-color"]

Constslctrs= [".outline0", ".outline-none"]

Slctrs.forEach (slctr= > {

Styles=window.getComputedStyle ($(slctr))

CssProps.forEach (cssProp= > {

Print ("% SJO% SIS% s", slctr,cssProp,styles [cssProp])

})

})

Results:

.outline0, outline-widthis0px

.outline0, outline-styleisnone

.outline 0, outline-colorisrgb (0d0238)

. outline-none,outline-widthis0px

. outline-none,outline-styleisnone

.outline-none,outline-colorisrgb (0pd0238)

Outline simply provides a more convenient API for setting single or multiple specific outline properties, so outline:0 and outline:none are essentially the same.

I really can't make a fillet.

Since we have border-radius, we can use CSS to make rounded rectangles, circles and other graphics, and even box-shadow is affected by border-radius to achieve the effect of element shadows. Can outline also have the effect of rounding corners? The answer is no. That is because the role of outline is originally used to outline the outline of the space occupied by the element, although the visual fillet is achieved through border-radius, but the position space occupied by the element has not changed at all, it is still the square with edges and corners.

.round {

Width:100px

Height:100px

Background:yellow

Border-radius:50%

Outline:solid1pxred

}

The above is about the content of this article on "how to use outline in css". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.