Analysis on the difference between outline and border in CSS

Border and Outline:

Border Properties:

Border-width, Border-style, Border-color where border-style can be none or hidden

Outline (Contour)
Draws a line enclosing an element at the periphery of the edge of the element border, including the settings of the Outline-color, Outline-style, outline-width three sub-properties, which can be defaulted without a fixed order. The contour does not occupy the page space or is not necessarily a rectangle.
Outline is supported directly in browsers other than IE. Only the Rules! Outline is supported by browsers that are later than IE8 in document.

Outline-style can be none (does not contain the hidden attribute)

Summary: The differences between the two are:
1.outline is not space-saving and does not add extra width or height (this will not cause reflow or repaint when the browser renders)
2.outline may be non-rectangular (under Firefox)

In the Firefox browser, there is a outline pair of rounded corners couplesoutline-radius

Example:

Using outline to achieve results

<! DOCTYPE html>
：



Box-shadow simulation of outline fillet effect

outline-radiusIt's not possible, but we can use other properties to achieve similar effects, for example, to build one of the great gods box-shadow .

We usually use box-shadow the most of the previous 3 parameters, horizontal/vertical offset and fuzzy size, there may be some small partners do not know what the 4th optional parameter value is the use of it? The box-shadow 4th parameter value, outside the extension, can extend the projection range, of course, the enlarged area is a solid color region. We can use this feature to simulate a outline real-color border effect that does not affect the size of the element.

Example first, the code is as follows:



<! DOCTYPE html>

As follows:


Here's a brief explanation of what the next two lines of CSS code mean:


  

 
   
 
    
border-radius: 1pxRepresents a fillet size of 1 pixels. Some classmates may be strange, how is 1 pixels ah, the fillet is clearly good dozens of pixels, below just explain;
 
    
box-shadow: 0 0 0 30px #cd0000There are 4 values, namely horizontal offset 0, vertical offset 0, blur 0 (solid color), and expansion size 30 pixels. As we can imagine, the light shines directly from the top of the box, because there is no offset, no blur, and we don't see any shadows. In fact, the shadow of the box is just the size of the box (take a 1 pixel fillet), and at this point, expand 30 pixels, we can fill the brain, 1 pixel rounded shadow and then expand 30 pixels. Yo, is not the effect we need, is not the effect of the show!
border-radiusyou know, about 1 pixels, and after 30 pixels, the rounded corners are 30 pixels in size.
 
   

  
However, although it is not visible to the naked eye, the above method is actually flawed, because the picture is not a pure right angle, there are 1 pixels of rounded corners. If you want to achieve the perfect uchikata Outer circle effect, you can set a layer of labels, the outside of the label to use border-radius and box-shadow on it.