Нежелательное пространство в пограничном переходе

Question

Я сделал переход границы для div в CSS, который в основном имеет границу, которая становится видимой в часовом режиме.

Here it is

Наведите указатель мыши на серый прямоугольник, чтобы увидеть его.

Код ниже только здесь, так как сайт просит меня, пожалуйста, см. Ссылку.

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

Однако, как вы можете видеть в загоне, есть пространство между краями серого прямоугольника и границ, а концы не отвечают правильно.

Любые идеи относительно почему это может случиться?

Обновление

На самом деле, нашли решение.

Answer 1

Я обнаружил, что проблема связана с тем, как ширина границы меняла размер окна div-элемента.

В принципе, создание границы 2px добавляло 2px ширины (с каждой стороны, я полагаю) к элементу div и, таким образом, создавало пространство и не выполнялось.

решение было добавить объявление

box-sizing: border-box; 

к :: до и после того, как :: псевдо элементов (и на всякий случай я добавил его к элементу 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>