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>