Question

您好我在这个网站上工作 - http://smudgedigital.com/animation-projects/并且项目页面上的图库存在问题。图像应该都是圆形，当滚动图像时，图像应保持圆形并具有悬停黑色状态。

然而，尽管该网站工作正常，但我最近注意到圈子不再是谷歌浏览器中的圈子。事实上，所有州都是正方形的。

我查看了这个网站以找到任何答案，但它们似乎都没有效果。我尝试过为所有浏览器使用border radius代码;

-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
border-radius: 100%;

但即使我使用！important标签，它似乎也没有捡起来。我也尝试使用像素而不是百分比。当我使用inspect元素工具时，我可以添加它;

.view img {
display: block;
position: relative;
border-radius: 100%;
}

它适用于正常状态，但当我把它放入我的网站css时它不会出现。

我看到有些人说谷歌只是不理解溢出：隐藏属性，它与边界半径无关，但溢出：隐藏确实出现。

非常感谢任何帮助。我已经在wordpress上构建了这个网站。

谢谢，

Answer 1

加

.view-first img {
    transition: all 0.2s linear;
    border-radius: 100%; /* added new */
}

除去

.view{
    overflow:hidden; /* removed */
}

Answer 2

这看起来是Chrome中的一个已知错误我害怕。它主要与过渡有关，以及在过渡期间绘制DOM时父/子的顺序如何变为：

作为替代方案，您可以使包括边框和阴影在内的整个圆圈的大小增加。但是，我不认为这就是你想要的效果。