如何利用CSS中的outline-offset属性实现加号

这篇文章给大家分享的是有关如何利用CSS中的outline-offset属性实现加号的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司2013年至今，先为墨竹工卡等服务建站，墨竹工卡等地企业，进行企业商务咨询服务。为墨竹工卡企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

假设有这么一个初始代码:




    
    
    Document

其效果如下:

如何利用CSS中的outline-offset属性实现加号

然后再把这个outline-offset属性的值改为-118px,那么就会把边框变成一个加号当然我这里为了效果显著一些,我加了一个动画效果来显示,如下代码:




    
    
    Document

其效果如下:

如何利用CSS中的outline-offset属性实现加号

使用outline-offset做加号的总结

我觉得这个很有意思,在这里我试了很多次,在这里我总结了一下使用outline-offset属性负值的条件：

容器必须是个正方形
outline 边框本身的宽度不能太小
outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)

在这个例子后，我又在想，CSS 属性可以取负值的属性和地方有很多,也有许多意想不到的效果。大家最为熟知的就是负margin，使用负的 marign，可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢？

下文就再介绍一些 CSS 负值有意思的使用场景。

使用 scale(-1) 实现翻转

通常，我们要实现一个元素的 180° 翻转，我们会使用 transform: rotate(180deg) ，这里有个小技巧，使用 transform: scale(-1) 可以达到同样的效果。看个 Demo：




    
    
    Document

.item:nth-child(1) { animation: rotate 3s infinite linear; } .item:nth-child(2) { animation: rotate 3s infinite -1s linear; } .item:nth-child(3) { animation: rotate 3s infinite -2s linear; }

大橙子网站建设，新征程启航

如何利用CSS中的outline-offset属性实现加号

其他资讯