图片边框半径在 css 过渡期间不起作用

Question

我正在使用 border-radius: 50%; 使图像变圆。默认情况下，图像是模糊和缩放的（带有隐藏的溢出），悬停时它将移除模糊和缩放。但是，当我在元素上使用 CSS 过渡时，它会在过渡期间暂时显示溢出。

Answer 1

我相信在转换过程中，元素会从文档流中取出，类似于阴影 position: relative; 并在动画完成后放回原处。

如果强行让parent的z-index高于child，那么parent要继续剪辑overflow

figure.effect-park {
    background-color: #0D4C16;
    border-radius: 50%;
    z-index: 1;
}

figure.effect-park img {
    z-index: 0;
    opacity: 0.5;
    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

Answer 2

只需让 border-radius 继承

.parent {
    border-radius: 50%;
}

.parent img {
    border-radius: inherit;
}

Answer 3

我遇到了同样的问题。将此 css 放在 parent 上对我有用：

clip-path: circle(50% at center);
-webkit-clip-path: circle(50% at center);

在 Safari、Firefox 和 chrome mac 和 Microsoft Edge 上进行了测试。

Answer 4

我遇到了同样的问题，一个元素在过渡时用右角增长，一旦过渡结束，圆角就会重新出现。我尝试了所有上述解决方案但没有成功（剪辑路径除外，因为边缘或 IE 不支持它）。

然后我删除了我的过滤器并且转换成功了。所以我的解决方案是移除滤镜以使其至少在缩放时起作用。

图片边框半径在 css 过渡期间不起作用

Images border-radius doesn't work during css transition

css

hover

blur

flicker