如何在图像悬停过渡期间保留图像圆角放大？

Question

DEMO

图像放大悬停很容易 图像圆边框很容易 合并它们，好的，但过渡期间圆角消失 过渡后，圆角回来了 问题：如何在转换期间保留圆角？

.img-wrapper {
    border-radius: 10px;
}

.img-wrapper img {
    transition: transform .5s ease;
    transform:scale(1);
}

.img-wrapper img:hover {
    transform:scale(1.5);
}

Answer 1

尝试添加：

.img-wrapper {
    border-radius: 10px;
    position:relative;
    z-index:1;
}

如果仍然没有工作，请尝试以下问题： overflow:hidden ignored with border-radius and CSS transforms (webkit only)

Answer 2

将-webkit-mask-image: -webkit-radial-gradient(circle, white, black);添加到课程img-wrapper，并在此处添加了一些样式fiddle

Answer 3

将包装边框半径移动到图像上。

.img-wrapper {
    width: 400px;
}

.img-wrapper img {
    border-radius: 10px;
    transition: transform .5s ease;
    transform:scale(1);
}

.img-wrapper img:hover {
    transform:scale(1.5);
}