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

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

问题

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

有什么想法吗？

编辑

这似乎只是 Chrome 在 Windows

上的问题

Answer 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 的信息，我想 post 在这里我的答案适合你的情况，因为你需要在标签和父标签上执行此操作，但如果您愿意，我们可以将其作为复制品关闭。}

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

CSS Transition with Border Radius and Linear Gradient

css

border

linear-gradients

css-transitions

Codepen Demo