欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3之outline属性

程序员文章站 2022-04-14 20:39:59
...
在看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属性的详细内容,更多请关注其它相关文章!

相关标签: outline css3 css