1. 线性渐变(是从一个方向到另一个方向的渐变)

属性值:background:linear-gradient(颜色)

✍默认值:从上到下线性渐变:

代码:

结果:

属性延伸:

(1)改变渐变方向:

从下到上:background:linear-gradient(to top yellow,green)

从左到右:background:linear-gradient(to rightyellow,green)

从右到左:background:linear-gradient(to leftyellow,green)

从左上到右下:background:linear-gradient(to bottom rightyellow,green)

(2)改为任意角度的渐变

属性:background:linear-gradient(50deg yellow,green)

含义是:从红色到绿色50°渐变;

0°渐变是:红色从下到上渐变为绿色;90°是从左到右;180°是从上到下;270°是从右到左

2. 径向渐变(从一个小点到四周的渐变)

属性:background:radial-gradient(颜色值)

(1)不规则颜色渐变:background:radial-gradient (yellow 30%,orange 50%,green80%)

代码:

结果:

这个百分比的含义是,拿上面的代码说明:黄色到盒子30%的位置开始渐变为橙色,30%以前不渐变都是黄色,橙色从50%的位置开始渐变为绿色,80%以后都是纯绿色。

还有一个极端一点的:background:radial-gradient(red 50%,bule 50%)

含义是:红色从50%位置开始渐变,而50%以后都是蓝色,所以从50%-50%之间没有渐变,所以两个纯色的圆,前50%是红色,后50%是蓝色。

(2)设置渐变形状

(3)改变中心点的位置和改变渐变的大小

x轴60%,y轴40%的位置,坐标原点在左下角,,,

如果属性不好用了,可以在前面加:“-webkit-”(google浏览器特定的格式,其他浏览器可以去百度查查)

3. 重复渐变

图示:

代码:

结果:

代码:

结果:

4.太极小练习:

用到“::before”和“::after”伪元素,和线性渐变的知识:

代码:

结果: