css3 outline attribute

When I was reading articles related to CSS3, I saw a way to use CSS styles to achieve a "+" plus sign effect

Here I came into contact with a new CSS3 attribute, outline, which translated into Chinese is——"outline ";

Syntax: outline:outlineWidth outlineStyle outlineColor;

For example: outline:5px solid blue;

And according to my test, the 5px here , solid, and blue can be swapped at will without affecting the display effect;

Moreover, this attribute is not part of the box model, so it does not occupy space and does not need to be calculated when using it. Width, height and other values ​​

are also supported by browsers: ie8+ and other mainstream browsers. Firefox even supports outline-radius, which is the same as border-radius

.

Looking from the "+" example

<p>第一个方法是使用outline－offset的向内偏移结合border实现的，不兼容所有IE，safari上也有点问题，要用chrome查看才行</p>
<p class="use-outline-offset"></p>


<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>

there is also an attribute mentioned: outline-offset, which is the outline offset, here Negative values ​​are supported. This reminds me of paths in AI, and offset paths. Negative values ​​are offset inwards. Therefore, the "+" sign effect is achieved; the

outline-offset attribute is supported by all mainstream browsers, except IE (after testing, it is indeed not supported).

But this attribute does not take up space very well, it can improve work efficiency, and combined with outline-offset can achieve some unexpected effects;

The above is the detailed content of css3 outline attribute. For more information, please follow other related articles on the PHP Chinese website!