CSS【进阶】线性&径向渐变background-image:linear-gradient()；background-image:radial-gradient()；

目录

1. 线性渐变：

1.1 从左到右渐变

1.2 从下到上渐变

1.3 从左下角到右上角渐变

1.4 特定的角度渐变

1.5 多个颜色节点：【这个配色优点丑丑的】

1.6 使用rgba透明度：

1.7 重复渐变：【记得颜色和百分数之间是空格不是逗号；这个配色让我毛骨悚然】

1.8 具体案例用过的属性：

2. 径向渐变

2.1 两个颜色：

2.2 圆形：

2.3 椭圆形：

2.4 重复渐变：记得加repeating在前面

2.5 调整中心点的位置

---

1. 线性渐变：

 <div>123</div>

1.1 从左到右渐变

div {
      width: 200px;
      height: 200px;
      background-image: linear-gradient(to right, pink, yellow);
}

1.2 从下到上渐变

background-image: linear-gradient(to top, pink, yellow);

1.3 从左下角到右上角渐变

background-image: linear-gradient(to top right, pink, yellow);

1.4 特定的角度渐变

【角度无需记忆，可以自己控制台测试】

从下到上：0deg

background-image: linear-gradient(0deg, pink, yellow);

从左到右：90deg

background-image: linear-gradient(90deg, pink, yellow);

从左下到右上：45deg

background-image: linear-gradient(45deg, pink, yellow);

1.5 多个颜色节点：【这个配色优点丑丑的】

 background-image: linear-gradient(45deg, pink, yellow, blue);

1.6 使用rgba透明度：

background-image: linear-gradient(45deg, rgba(255, 255, 33, .4), rgba(255, 25, 33, .8));

1.7 重复渐变：【记得颜色和百分数之间是空格不是逗号；这个配色让我毛骨悚然】

 background-image: repeating-linear-gradient(45deg, yellow 10%, pink 20%)

1.8 具体案例用过的属性：

background-image: linear-gradient(transparent, rgba(0, 0, 0, .4));

2. 径向渐变

<div>123</div>

【径向渐变不设置角度】

2.1 两个颜色：

div {
    width: 200px;
    height: 300px;
    border-radius: 50%;
    background-image: radial-gradient(yellow, pink);
}

2.2 圆形：

background-image: radial-gradient(circle, red, blue);

2.3 椭圆形：

background-image: radial-gradient(ellipse, red, blue);

备注：

最好盒子的长度和宽度设置的差别大一些，这样circle和ellipse的差别会更加明显。

注意ellipse是径向渐变的默认值，表示椭圆形。

区别text-overflow：ellipsis这个属性；这个属性目的是文字溢出显示……

2.4 重复渐变：记得加repeating在前面

background-image: repeating-radial-gradient(ellipse, pink 10%, blue 15%);

2.5 调整中心点的位置

background-image: repeating-radial-gradient(ellipse at 30% 40%, pink 10%, blue 15%);

30% 是中心点的横坐标

40%是中心点的纵坐标

结尾：

学习id： 201903090124-9

现在是大三学生，学习到了前后端交互的npm阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。