这里面接触到一个新的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属性的详细内容，更多请关注php中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
