css3之outline属性

在看张鑫旭前辈的css3相关文章时候，看到一个用css样式实现一个“+”加号效果

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

这里面接触到一个新的css3属性，outline，翻译成中文就是——"轮廓";

语法：outline:outlineWidth outlineStyle outlineColor;

例如：outline:5px solid blue;

而且据我测试，这里的5px，solid，blue可以随意调换位置，不影响显示效果；

而且这个属性不属于盒模型的一部分，所以不占据空间，在使用的时候，不需要去计算宽度，高度等值

浏览器的支持情况也较好：ie8+，还有其他主流浏览器都支持。火狐甚至还支持outline-radius，和border-radius

是一个道理。

从”+“号这个例子上面来看

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

里面还提到了一个属性：outline-offset，也就是轮廓偏移，这里支持负值。这使我联想到了AI中的路径，以及偏移路径。负值就是向内偏移。所以实现了”+”号效果；

outline-offset属性所以主流浏览器都支持，除了IE（经过测试，确实不支持）。

但是这个属性不占用空间的特性非常好，可以提高工作效率，并且结合outline-offset可以实现一些意想不到的效果；