css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡

本文链接：https://blog.youkuaiyun.com/zhangawei123/article/details/127124907

本文通过两个案例介绍了如何利用CSS渐变创建复杂图像和泡泡效果。案例一展示了如何结合线性渐变制作出带有白色与红色条纹的图像，通过调整角度和透明度实现四角与条纹的融合。案例二则探讨了径向渐变的应用，通过改变渐变中心和选择适当颜色，制造出逼真的泡泡视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，前言

在已经学习过渐变的基础上，我们来用渐变做两个案例，使用线性渐变做一个多个渐变复合在一起的图像（下一图片），和使用径向渐变做一个泡泡（下二图片）。

二，案例一，多个镜像渐变复合出图像

1.分析

分析图片：

第一步，四个角是白色的，然后红色条，可得是从四个角开始渐变，先是白色，然后红色，最后是透明色transparent，而方法是我们平常使用渐变做条纹格子的办法。

第二步，然后是从上到下，蓝色逐渐渐变到透明色，在0%时候是纯蓝色，在75%的地方是纯透明色。

第三步，最后，是蓝色，红色的条纹，使用 repeating-linear-gradient来重复平铺。因为前面的渐变使用了透明色，所以不会遮挡后面。

2.第一步，四角的白色与红色条纹。

先从左下角开始，设置渐变为45deg，白色到90px，90px到110px为红色，做出红色的条纹效果，

再是透明色110px到130px，保证不会遮挡住后面。

然后是左上角，设置135deg，白色到60px，红色60px到80px，再是透明色。

把四个角都设置好，就可以实现四角的白色和红色条纹效果。

linear-gradient(45deg, white 90px, red 90px, red 110px, transparent 110px,
 transparent 130px),

                linear-gradient(-45deg, white 90px, red 90px, red 110px,
 transparent 110px, transparent 130px),

                linear-gradient(135deg, white 60px, red 60px, red 80px, 
transparent 80px, transparent 100px),

                linear-gradient(-135deg, white 60px, red 60px, red 80px, 
transparent 80px, transparent 100px);