This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

Creation is not easy! After watching feel have harvest, point a like bai!!

preface

In daily development, we often use border to add some beauty to an element, but because of the box model, border can sometimes influence our judgment, so today we will introduce another attribute to add some beauty to an element.

outline

The attribute in outlineCSS draws a line outside the element. It is similar to a boundary, except:

  1. It’s always around all the edges, you can’t specify a particular edge
  2. It is not part of the box model and therefore does not affect the location of elements or adjacent elements, that is, the outline does not take up space
  3. It’s not always a rectangle

compatibility

With the exception of Internet Explorer, other browsers are compatible.

grammar

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

It follows that outline is also an abbreviated property.

outline: 1px dashed red;

Does not occupy a space

First define a p tag and a div tag, and 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>Copy the code

As a result, you can clearly see that the outlin defined on the div is running on the p tag.

It’s not a rectangle

Use span for the test, and use BR for the newline, so that each line has a different number of words.

<span> I can create a non-rectangle <br /> border </span> span {outline: 1px err err red; }Copy the code

In the final result, you can see that the outline is only on top of the words.Let’s try border again

border:1px solid #000;

Copy the code

At first glance, it looks like the border is also being created irregularly, but take a closer look, the border isn’t irregularly at all, it’s just a line break.

Outline -style Specifies the outline style

Attribute values

dotted

dashed

solid

double

groove

ridge

inset

outset

Outline -color Outline color

Color value

outline-color: invert;

Invert (IE compatible)

Tested: The latest versions of Chrome and Firefox do not support this value

contrast

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 Specifies the outline width

Attribute values

thin

1px

medium

3px

thick

5px

<length>

outline-width: 10px;

Curve-offset Specifies the outline offset

The numerical

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

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

outline-offset: -10px;