css3之outline属性

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

这里面接触到一个新的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>
<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>

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

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

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

以上就是css3之outline属性的详细内容，更多请关注其它相关文章！