如何在图片悬停缩放过程中保留圆角？

Question

演示

鼠标悬停放大图片很容易。
图片圆角也很容易。
但是，将它们组合起来，在过渡期间，圆角会消失。
过渡后，圆角又回来了。
问题：如何在过渡期间保留圆角？

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

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

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

- Ksthawma

Answer 1

尝试添加以下内容：

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

如果仍然无效，请尝试以下问题中的解决方案： overflow:hidden被border-radius和CSS transforms忽略（仅适用于WebKit）

- Pepo_rasta

Answer 2

将-webkit-mask-image: -webkit-radial-gradient(circle, white, black);添加到类img-wrapper中，并在此处添加一些样式。这是示例代码。

- Krsna Kishore

---

@KaFaiLo，请检查这个并告诉我！！ - Krsna Kishore

这是我第一次看到mask-image。 Pepo_rasta的答案已经测试过了，而且更简单。 - Ksthawma

Answer 3

将border-radius从包装器移至图像。

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

- user2968189

---

放大时蓝色边框消失。 - Ksthawma

不，要求是在图像缩放时看到相同的可见图像尺寸 - 看到图像的边缘少一些。您的fiddle在缩放时显示整个图像，因此可见尺寸会发生变化。 - Ksthawma