Question

鉴于我的CodePen https://codepen.io/scottmgerstl/pen/MpMeBy这是我的问题图片布局

<span class="profile-pic-wrapper">
    <a href="https://www.google.com" target="_blank">
        <img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
        <span class="profile-pic-overlay">
            <span class="social-icon">View Profile</span>
        </span>
     </a>
</span>

描述

我正在尝试在由边界半径（profile-pic-overlay）剪切的线性渐变（profile-pic-wrapper）上使用CSS过渡。当圆形图像容器悬停在上面时，所需的行为是有一个轮廓图像，线性渐变淡入视图，表明您可以查看该轮廓。

问题

渐变不符合边界半径的边界。我试过this answer但是当我这样做时，线性渐变不会转换。 @Keyframe动画也无济于事。

有什么想法吗？

修改

这似乎仅适用于Windows上的Chrome

Answer 1

到目前为止，我可以测试该问题与渐变图层的<a>容器有关。在这里搜索有关如何解决此问题的一些属性，您可以添加，涵盖大多数浏览器：

will-change＆amp; transform:translate3d

将此添加到您的代码中：

.profile-pic-wrapper, .profile-pic-wrapper a {
  display:block;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  will-change:transform;
}

Codepen Demo

_{注意：信息改编自this answer，我想在此发布我的答案，以适应您的情况，因为您需要在标签和父标签上进行，但如果你希望我们可以将它关闭为dup。}

边界半径和线性渐变的CSS过渡

1 个答案:

Codepen Demo