在看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属性的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
