前端小白的学习之路2019-10-27

今天具体学习了背景色渐变的用法，在为页面添加效果时，让页面表现的更加丰富，会使用到渐变效果。

“background”背景色渐变是利用色彩在标签元素内以一定的方向进行颜色的过渡变化而成。

（1）线性渐变背景颜色沿着一条直线进行的

（2）渐变函数：linear-gradient（）

（3）渐变条件

给上两种以上的背景颜色作为函数参数（多个颜色以逗号分隔）

实列

效果

（4）渐变方向

渐变可以设置方向的，作为linear-gradient() 函数的第一个参数就可以了。【默认为从上到下开始渐变】

渐变方向设置方式：

1.使用方位名称进行设to right : 表示从左到右渐变、to left : 表示从右到左渐变、to top：表示从下到上渐变、to bottom: 表示从下到上渐变，方位名词还可以组合：比如to right bottom 表示从左上渐变到右下

2.使用角度进行设置

顺时针为正，指向12点时为0度,即0deg

例如：

0deg : 从下到上渐变

180deg：从上到下渐变（默认）

90deg: 从左到右渐变

-90deg 从右往左渐变

360deg : 回到0点了，从上到下

然后使用该效果制作一个体温计和金箍棒的效果:

体温计

金箍棒

其实就是在linear-gradient() 函数调整颜色渐变开始和结束的位置就可实现