边界过渡中有害的空间

Question

我为CSS中的一个DIV进行了边界过渡，基本上使边界以时钟的方式可见。

这里是

悬停在灰色矩形上以查看它。

下面的代码仅在此处要求我，请请参阅链接。

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

但是，，如您在笔中所看到的，灰色矩形和边框的边缘之间存在空间，而两端无法正确相遇。

关于的任何想法这可能会发生？

update

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

Answer 1

我发现问题与边框的宽度正在更改Div元素的盒子大小有关。

基本上，使边框2PX将宽度（我相信的每一侧）添加到DIV元素中，因此导致空间和UN-MET末端。

解决方案是添加声明

box-sizing: border-box;

to :: for之前和:: pseudo Elements（为了安全起见，我将其添加到DIV元素），然后Div元素的宽度不再受边界宽度的影响。

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

要查看先前的状态，只需评论盒子尺寸：border-box;声明实例。

Answer 2

一个具有多个背景的更轻松的解决方案：

* {
  box-sizing: border-box;
}
body {
  background: silver;
}
.box {
  background-color: white;
  height: 10em;
  margin: 2em auto;
  width: 10em;
}
.box:hover {
  animation: border 1s linear forwards;
  background-image: linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red), linear-gradient(to left, red, red);
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
@keyframes border {
  0% {
    background-size: 0% 4px, 4px 0%, 0% 4px, 4px 0%;
  }
  25% {
    background-size: 100% 4px, 4px 0%, 0% 4px, 4px 0%;
  }
  50% {
    background-size: 100% 4px, 4px 100%, 0% 4px, 4px 0%;
  }
  75% {
    background-size: 100% 4px, 4px 100%, 100% 4px, 4px 0%;
  }
  100% {
    background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
  }
}

<div class="box"></div>