谷歌浏览器边框半径问题答案

【问题标题】：Google Chrome Border Radius issue谷歌浏览器边框半径问题
【发布时间】：2014-11-29 10:42:35
【问题描述】：

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

尽管该网站运行良好，但我最近注意到这些圆圈不再是 google chrome 中的圆圈。事实上，所有州都是正方形的。

我浏览了这个网站以找到任何答案，但似乎没有一个有效。我已尝试对所有浏览器使用边框半径代码；

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

但即使我使用 !important 标记，它似乎也无法识别它。我也尝试过使用像素而不是百分比。当我使用检查元素工具时，我可以添加它；

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

它在正常状态下工作，但是当我将它放入我的站点 css 时，它不会出现。

我看到有人说google只是不理解overflow:hidden属性，它与边框半径无关，但是overflow:hidden确实出现了。

任何帮助将不胜感激。我已经在 wordpress 上建立了网站。

谢谢，

【问题讨论】：

【解决方案1】：

添加

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

删除

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

【讨论】：

【解决方案2】：

恐怕这似乎是 Chrome 中的一个已知错误。主要和transition有关，在transition中绘制DOM时父子顺序如何变化：

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

【讨论】：