如何运用 CSS 来制作凹凸有致的条状渐变矩形呢？

发布时间：2023-07-26 14:13:50 所属栏目：语言来源：

导读：今天给大家分享的是关于用CSS实现凹面渐变的矩形效果的内容，要实现这个效果，有两个难点，一个是凹面矩形实现，另一个给凹面矩形添加渐变的效果，本文有实现代码和详细的介绍供大家参考，感兴趣的朋友接下来跟随小编

今天给大家分享的是关于用CSS实现凹面渐变的矩形效果的内容，要实现这个效果，有两个难点，一个是凹面矩形实现，另一个给凹面矩形添加渐变的效果，本文有实现代码和详细的介绍供大家参考，感兴趣的朋友接下来跟随小编一起看看吧。

    实现凹面矩形

    实现这个样式的灵感来自网上一篇使用css实现内凹角的文章，描述如何实现chrome标签页的内凹角效果，大概是下面这样子：

    使用 radial-gradient 径向渐变来实现，将渐变的模糊距离缩小到0就能看到清晰的圆形界限。按照这个思路就能实现内凹矩形的样式了，通过调整渐变的 position 控制中心点的位置，调整径向圆的size可以控制凹面的弯曲程度，就像下面这样：

    可以在MDN的径向渐变demo里调试：

background: radial-gradient(300px 300px at 112px 0, #eee 75%, #333 75%);

    小细节

径向渐变如果模糊距离为0，会看到圆形的边界有很明显的锯齿，增加1px的模糊距离可以消除锯齿。（这就是传说中的抗锯齿吗？）

android 4.4.4不兼容径向渐变。

    实现线性渐变的凹面矩形

    上一节已经实现了凹面矩形，那如何给凹面矩形再设置线性渐变呢？background已经被使用了，不能又设置径向渐变又设置线性渐变。

    可以使用 mask-image 来实现抠图的效果，MDN的例子：

    MDN的例子使用五角星形状的svg在绿色的背景上抠图得到了绿色的五角星，要实现渐变的凹面矩形可以用凹面矩形的形状在线性渐变的背景上抠图。

    用 mask-image 设置形状， background 设置线性渐变：

.xxx {

  background: linear-gradient(115deg, #ff66ff, #4db8ff);

  mask-image: radial-gradient(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);

}
    小细节

    mask-image在移动端的兼容性竟然比径向渐变要好，安卓4.4.4是支持的。

    渐变背景色的过渡

    background-image本身是不支持过渡动画的，但是可以通过一些骚操作来实现，张鑫旭老师的文章说得非常详细：

    https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

    https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/

    background-image不支持过渡动画，但是opacity支持呀，在之前的线性渐变凹面矩形上再叠加一层伪元素，设置伪元素背景色为另一个线性渐变色，然后控制伪元素的opacity，实现线性渐变过渡效果。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!