CSS线性渐变的凹面矩形过渡动效的实现

本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路,主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案,欢迎在评论区和我讨论。 上图 实现凹面矩形 实现这个样式的灵感来自网上一篇使用css实现内凹角的文章,描述如何实现chrome标签页的内凹角效果,大概是下面这样子: 使用 radial-gradient 径向渐变来实现,将渐变的模糊距离缩小到0就能看到清晰的圆形界限。 按照这个思路就能实现内凹矩形的样式了,通过调整渐变的 position 控制中心点的位置,调整径向圆的size可以控制凹面的弯曲程度,就像下面这样: 可以在MDN的径向渐变demo里调