在css转换期间,图像border-radius不起作用

前端之家收集整理的这篇文章主要介绍了在css转换期间,图像border-radius不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用border-radius:50%;制作图像.默认情况下,图像模糊和缩放(带有隐藏的溢出),并且在悬停时它将删除模糊和缩放.但是,当我在元素上使用CSS转换时,它会在转换期间暂时显示溢出.

http://jsfiddle.net/jonny_me/cyvL61qx

解决方法

我相信转换,元素从文档流中取出,类似阴影位置:相对;并在动画完成后重新放入.

如果强制父级的z-index高于子级的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;
}
原文链接:https://www.f2er.com/css/215566.html

猜你在找的CSS相关文章