Css 边框半径为的div上的长方体阴影稍微偏离中心

我试图在css中设置一个方框阴影的动画，以将联系人图像显示为圆形。当我将鼠标悬停在它上面时，我想按原样显示图片，并在前一个阴影覆盖所有图片的地方画一个1px的圆圈

为此，我有一个div

，其中div

下有人物图像，另一个div位于图像上方，带有

z-index: 1200;
position: absolute;
top: 35px;
left: 50%;
right: 50%;
transform:translateX(-50%);
border-radius: 100%;
-moz-box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);
box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);

此时的边界半径为300px，它将覆盖所有图像，但不会覆盖更多，因为

contact_image

容器已

溢出：隐藏

现在，当我将鼠标悬停在图像上时，我想缩小长方体阴影

至1px：

.contact:hover .contact_image .contact_frame{
    animation-fill-mode: forwards;
    animation-name: contact_image_circle;
    animation-duration: 0.5s;
}


    @keyframes contact_image_circle{
    0% {
        box-shadow: 0px 0px 0 300px rgba(255, 255, 255, 1);
    }
    100% {
        box-shadow: 0px 0px 0 1px rgba(255, 255, 255, 1);
    }
}

但正如你在这把小提琴中看到的，盒子的阴影有点偏离中心。 我在firefox和IE中体验到了这一点

更新：

在玩了一段时间之后，我现在可以说，这肯定是firefox的问题（圆框阴影的一边比另一边大一点）。然而，我在使用IE时也遇到了类似的情况（两边的阴影似乎都更大，顶部和底部都很好）。在Chrome中，我无法重现这个问题

更奇怪的是，我只是在Firefox和IE中看到我的大屏幕上的元素时才有问题。在我的笔记本电脑上（分辨率更高），一切都很好

---

你知道我做错了什么吗？

你说的偏离中心是什么意思？你的意思是圆本身没有垂直居中（底部的空间比顶部的空间大）？@elveti没有。正如你在JSFIDLE中看到的那样，shado应该产生的圆不是在所有的边上都是均匀的。@DigitalJedi你在所有浏览器中都会遇到这种情况吗？我遇到了我认为是相同的问题（圆形元素上的偏离中心的框阴影），但我只在Firefox中看到了这个问题-嗨，firstoff，thx，谢谢你的评论！在玩了一段时间之后，我现在可以说，这肯定是firefox的问题（圆框阴影的一边比另一边大一点）。然而，我在使用IE时也遇到了类似的情况（两边的阴影似乎都更大，顶部和底部都很好）。在Chrome中，我无法再重现这个问题->我将更新我的问题。更奇怪的是，我只是在Firefox和IE中遇到了这个问题，在我的大显示器上，在我的笔记本电脑（更高分辨率）上查看元素时，一切都很好！我假设这是某种浏览器渲染问题。如果你发现了这件事，如果你能留下来，我会很高兴的。