css - 边界过渡中不需要的空间

Question

我在 CSS 中为一个 div 做了一个边框过渡，基本上边框以时钟工作的方式变得可见。

Here it is

将鼠标悬停在灰色矩形上即可查看。

下面的代码因为网站要求我提供它，请查看链接。

<div class="outerBox"></div>

但是，正如您在钢笔中看到的那样，灰色矩形的边缘和边框之间有空间，两端没有正确对齐.

关于为什么这可能发生的任何想法？

更新

实际上，找到了解决方案。

Answer 1

我发现问题与 边框宽度改变 div 元素的框大小 的方式有关。

基本上，使边框为 2px 是为 div 元素添加 2px 的宽度(我相信在每一侧)，从而导致空间和未满足的结束。

解决方案是添加声明

box-sizing: border-box;

添加到::before 和::after 伪元素(为了安全起见，我将其添加到 div 元素)，然后 div 元素的宽度不再受边框宽度的影响。

如果您单击我问题中的链接，您会看到边框现在很好地包围了矩形。

要查看之前的状态，只需注释掉 box-sizing: border-box;声明实例。