06.background&font-------11.线性渐变&径向渐变

1. 我们可以通过渐变来实现复杂的背景颜色，实现从一个颜色向另一个颜色过渡的效果

注意：渐变是图片，需要通过background-image来设置

2.线性渐变：linear-gradient，颜色沿着一条直线发生变化

用法：background-image：linear-gradient（渐变方向，渐变颜色1，渐变颜色2）， 可同时设置多个渐变颜色，多个颜色默认情况下平均分布

        在线性渐变开始部分可以指定渐变的方向：to top、 to bottom（渐变方向为向下渐变，也是默认方向）、to right、to left（渐变方向为向左渐变），xxxdeg----表示xxx度数，turn---表示圈数。

        也可以手动设置渐变的方向：在渐变颜色后面跟上渐变开始的位置（用空格隔开），若该颜色前面或后面没有其他的颜色，则该位置前面为没有渐变的该颜色。

 3. 可以平铺的线性渐变：repeating-linear-gradient

用法：background-image：repeating-linear-gradient（渐变颜色1  渐变位置1，渐变颜色2  渐变位置2），注意：只显示渐变颜色，渐变高度=渐变位置2-渐变位置1，填满元素；也可像前面一样指定渐变方向。

4. 径向渐变：radial-gradient（放射性效果）

        径向渐变的圆心形状默认情况下由元素的形状所决定：

                元素为正方形-----圆心为圆形

                元素为长方形------圆心为椭圆形

5. 可以手动指定径向渐变的大小：circle（径向渐变圆心的形状为圆形），ellipse（径向渐变圆心的形状为椭圆形），也可以是由像素组成的偏移量（像素   像素）

6. 可以手动指定径向渐变的位置：

        语法为：radial-gradient（渐变的大小  at  渐变的位置，渐变颜色  渐变位置，渐变颜色  渐变位置，渐变颜色  渐变位置）

         渐变的位置：top 、bottom、left、right、center等指定方位的词，还可以是偏移量（像素），也还可以是closest corner（近角）、cloest  side(近边）、farthest corner（远角）、farthest  side（远边）等