chrome：带有填充和背景的图像上的边框半径

Question

我想用渐变圆创建悬停效果。 这段代码在 Firefox 中工作，以前在 chrome 中工作过。 现在 chrome 不会在填充图像上应用边框半径。 请问，可以让它再次在chrome中工作吗？ 感谢帮助。

 .wrap { width: 400px; height: 400px; } a { display: block; padding: 20px 50px; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; border-radius: 500px; padding: 0; transition: padding .4s; box-sizing: border-box; } a:hover>img { background: linear-gradient(to right, #d31249, #F60); padding: 15px; }

 <div class="wrap"> <a href="#"> <img src="https://image.freepik.com/free-icon/important-person_318-10744.jpg" alt=""> </a> </div>

Answer 1

您可以对a元素而不是img 。 我还添加了淡出效果，因此在鼠标移出时也可以看到渐变

 a.wrap { display: block; width: 300px; height: 300px; text-decoration: none; border-radius: 50%; padding: 0; transition: padding .4s, background-size 0s 0.4s; box-sizing: border-box; overflow: hidden; background: linear-gradient(to right, #d31249, #F60); background-size: 0 0; } img { max-width: 100%; border-radius: 50%; display: block; } a.wrap:hover { padding: 15px; transition: padding .4s, background 0s; background-size: 100% 100%; }

 <a href="#" class="wrap"> <img src="https://image.freepik.com/free-icon/important-person_318-10744.jpg" alt=""> </a>