你所不知道的 CSS 负值技巧与细节 _CSS

看到有网友使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？
使用负值 outline-offset 实现加号
假设我们有这样一个简单的结构：
<div></div>div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: 10px;}

文章插图

修改 outline-offset 到一个合适的负值，那么在恰当的时候，outline 边框就会向内缩进为一个加号。
经过一番尝试，修改上述 div 的 outline-offset为 -118px 。
div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: -118px;}加个动画效果，大概是这样：