在CSS转换过程中，图片border-radius不起作用 [英] Images border-radius doesn't work during css transition

问题描述

我使用 border-radius：50％; 来制作图片。默认情况下，图像模糊和缩放（带有隐藏溢出），悬停时会消除模糊和缩放。但是，当我在元素上使用CSS转换时，它暂时显示转换期间的溢出。

I'm using border-radius: 50%; to make an image round. By default the image is blurred and zoomed (with a hidden overflow) and on hover it will remove the blur and zoom. However, when I use a CSS transition on the element, it temporarily shows the overflow for the duration of the transition.

http://jsfiddle.net/jonny_me/cyvL61qx

推荐答案

我相信转换时，元素会被从文档流中取出，例如阴影 position：relative; ，并在动画完成时放回。

I believe on transition, the element gets taken out of document flow, something like a shadow position: relative; and put back in once the animation is complete.

如果您强制父项的 z-index 高于子项，则父项应继续剪辑溢出。

If you force the z-index of the parent to be higher than that of the child, the parent should continue to clip the overflow.

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;
}

这篇关于在CSS转换过程中，图片border-radius不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！