图像边界半径在 css 过渡期间不起作用

Posted 2023-03-06

【中文标题】图像边界半径在 css 过渡期间不起作用

【英文标题】：Images border-radius doesn't work during css transition

【发布时间】：2015-03-12 03:52:12

【问题描述】：

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

http://jsfiddle.net/jonny_me/cyvL61qx

【参考方案1】：

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

如果你强制父级的z-index高于子级，父级应该继续裁剪溢出。

http://jsfiddle.net/cyvL61qx/4/

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;

【讨论】：

我也有同样的问题。父级上的position:relative 和更高级别的z-index 解决了我的问题。谢谢。

这对我帮助很大！

【参考方案2】：

只要让边框半径继承

.parent 
    border-radius: 50%;


.parent img 
    border-radius: inherit;

【参考方案3】：

我有同样的问题。把这个css放在父母身上对我有用：

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

在 mac 和 microsoft edge 上的 safari、firefox 和 chrome 上测试。

【参考方案4】：

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

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