Question

我正在尝试对CSS中的框阴影进行动画处理，以将联系人图像显示为圆形。当我将鼠标悬停在上面时，我想按原样显示图片，并以1px的圆圈显示以前的阴影覆盖所有图片。

为此，我有一个div <contact_image>，其中人图像位于div <person_img>下，而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容器具有overflow: hidden

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

到1像素：

.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中仅遇到问题。在我的笔记本电脑（更高分辨率）上，一切都很好！

https://jsfiddle.net/29probgm/

有什么想法我做错了吗？

div上具有边框半径的框阴影稍微偏离中心

0 个答案: