CSS3 Properties of outline

Look at Zhang Xin Xu predecessor's CSS3 related articles, see a CSS style to achieve a "+" plus effect

http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/

This inside touches a new CSS3 attribute, outline, translates into Chinese is--"contour";

Syntax: Outline:outlinewidth outlinestyle outlineColor;

For example: outline:5px solid blue;

And according to my test, here the 5px,solid,blue can change position freely, do not affect the display effect;

And this property is not part of the box model, so do not occupy space, in use, do not need to calculate the width, the height of the equivalent

Browser support is also good: ie8+, and other mainstream browsers are supported. Firefox even supports Outline-radius, and Border-radius

is a truth.

From the "+" example above, see

<p> The first method is implemented using Outline-offset's inward offset combined with border, which is not compatible with all Ie,safari and has a problem with chrome viewing </p><div class= " Use-outline-offset "></div><style>.use-outline-offset{  Margin-left:auto;  Margin-right:auto;  width:200px;  height:200px;  border:40px solid #000000;  Background-color: #cccccc;  outline-width:40px;  outline-style:dotted;  outline-offset:-80px;  Box-sizing:border-box;} </style>

It also mentions a property: Outline-offset, which is the contour offset, where negative values are supported. This reminds me of the path in AI and the offset path. A negative value is an inward offset. So the "+" effect was achieved;

The Outline-offset property is supported by mainstream browsers, except IE (which is tested and does not support).

However, this property does not occupy space is very good, can improve work efficiency, and combined with outline-offset can achieve some unexpected effect;

CSS3 Properties of outline