CSS irregular outline-outline

Hello everyone, I'm Pinellia 👴, a sand sculpture programmer who has just started writing articles. If you like my articles, you can follow ➕ Like 👍 Add me on WeChat: frontendpicker , learn and communicate front-end together, become a better engineer ~ pay attention to the public No.: Pinellia in front-end , learn more about front-end knowledge! Click me to explore the new world!

Original link ==> http://sylblog.xin/archives/39

foreword

In daily development, we often use border to add some beauty to elements, but due to the existence of the box model, border sometimes affects our judgment, so today we will introduce another attribute to add some beauty to elements.

outline

The outline property in CSS draws a line outside the element. It is similar to a boundary, except:

1. it always surrounds all edges, you can't specify a specific edge
2. It's not part of the box model, so it doesn't affect the position of the element or adjacent elements, which means the outline outline doesn't take up space
3. it's not always rectangular

compatibility

In addition to IE browser, other browser compatibility is good.

grammar

outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit

It can be seen that outline is also an abbreviated attribute.

outline: 1px dashed red;

Does not take up space

First define a p tag and a div tag, then the div tag defines a 5px border and a 20px outline

 p {
      outline: 1px dashed red;
  }
div {
    border:5px solid #000;
  outline: 20px dashed red;
}

<p>outline: 1px dashed red;</p>

<div>outline: 20px dashed red;</div>

The final effect, you can clearly see that the outlin defined on the div has run to the p tag.

not a rectangle

Use span for testing and br for line breaks so that each line has a different word count.

 <span>我是outline<br />
        我可以创建非矩形<br />
        的边框</span>
        
span {
  outline: 1px dashed red;
}

In the final effect, you can see that the outline is only above the words.

Change to border and let's try again

 border:1px solid #000;

At first glance, it seems that the border created is also irregular, but if you look closely, the border is not irregular, just a new line.

outline-style outline style

attribute value

dotted

dashed

solid

double

groove

ridge

inset

outset

outline-color outline color

color value

outline-color: invert;

invert (IE compatible)

Tested: The latest version of chrome and firefox browsers do not support this value, it is only used for testing in IE

Compared

The background color of the page is white, and the outline is black.
` outline-color: invert;
`

The background color of the page is black and the outline is white.

outline-width outline width

attribute value

thin

1px

medium

3px

thick

5px

\<length\>

outline-width: 10px;

outline-offset outline offset

Numerical value

When the parameter value is positive, it means that the contour is offset outward
outline-offset: 10px;

When the parameter value is negative, it means that the contour is shifted inward

outline-offset: -10px;