具有边框半径和线性渐变的 CSS 过渡答案

【问题标题】：CSS Transition with Border Radius and Linear Gradient具有边框半径和线性渐变的 CSS 过渡
【发布时间】：2017-09-03 00:15:42
【问题描述】：

鉴于我的 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-wrapper) 裁剪的线性渐变 (profile-pic-overlay) 上使用 CSS 过渡。当圆形图像容器悬停在上方时，所需的行为是拥有个人资料图像，线性渐变淡入视图，表明您可以查看个人资料。

问题

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

有什么想法吗？

编辑

这似乎只是 Windows 上的 Chrome 的问题

【问题讨论】：

在 Chrome - MAC 上对我来说看起来不错......你能包括你的浏览器吗？
我在 Windows 上使用 Chrome
提示将转换从:hover 更改为正常状态，这样您在鼠标离开和输入codepen.io/anon/pen/qrzaay 时都有转换
好主意。如果您对剪辑问题有任何想法，请告诉我

标签： css border css-transitions linear-gradients

【解决方案1】：

据我所知，问题与渐变层的<a> 容器有关。在此处搜索如何解决此问题，您可以添加一些涵盖大多数浏览器的属性：

will-change & 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 关闭。}

【讨论】：