04-渐变（Gradients）

background的8个属性

属性	作用
[background-color]	设置背景颜色
[background-image]	设置一个元素的背景图像
[background-position]	设置背景图像的起始位置
[background-size]	设置背景图片大小
[background-repeat]	设置如何平铺对象的 background-image 属性
[background-attachment]	设置背景图像是否固定或者随着页面的其余部分滚动
[background-clip]	设置指定背景绘制区域
[background-origin:content-box;]	设置图片上下左右居中

background-image的渐变属性

1.语法(线性渐变)

background-image: linear-gradient(direction, color-stop1, color-stop2, …);
background-image: linear-gradient(方向, 颜色, 颜色, …);
重复线性渐变background-image: repeating-linear-gradient(角度，颜色，颜色，颜色);
方向默认从上到下，也可以从左到右，也可以对角；颜色可以同时设置多种

属性	作用
从上往下	background-image: linear-gradient(to bottom,red,blue);
从左往右	background-image: linear-gradient(to right,red,blue);
对角渐变	background-image: linear-gradient(to right bottom,red,blue);
多种颜色	background-image: repeating-linear-gradient(to bottom,red,yellow,blue);
重复线性渐变	background-image: repeating-linear-gradient(45deg,red,yellow 7%,blue 10%);

2.语法(径向渐变)

background-image: radial-gradient(shape size at position, start-color, …, last-color);
background-image: radial-gradient(形状 位置, 开始颜色, …, 结束颜色);
shape：有两个值-circle-ellipse（默认椭圆）
size：渐变的大小，即渐变到哪里停止，它有四个值。
closest-side：最近边； farthest-side：最远边；
closest-corner：最近角； farthest-corner：最远角；（不知道干啥的，可能用来调位置）