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

目录

一，前言

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

1.分析

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

3.第二步，从上到下的渐变

4.第四步，后面的蓝红条纹效果

5.源码

6.奇思妙想

三，径向渐变做出好看的泡泡

1.分析

2.改变径向渐变中心

3.镜像渐变

---

一，前言

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

 

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

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);

3.第二步，从上到下的渐变

此步比较简单，直接上代码。

 linear-gradient(blue 0%, transparent 70%)