css渐变

一、渐变: 背景色在多个颜色之间平稳的过渡。

二、分类：

1：线性渐变：

1）线性渐变：从一个方向到另一个方向的颜色的变化。

2）语法分类：

①标准模式的语法（不添加浏览器前缀）：

　　background: linear-gradient(direction, color-stop1, color-stop2, ...);

②说明：

　　direction：默认为to bottom，即从上向下的渐变；

　　stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

③兼容模式语法（添加浏览器前缀）：

        background:linear-gradient( direction, color-stop1, color-stop2,...)

④说明： direction：  不能添加to    默认指的是 从哪个方向开始

3）渐变方向：

①单一方向：to left  \   to right  \ to top

②对角着渐变：to left top   \   to  right bottom

③ 渐变线角度的变化：

          　　标准模式  ：  40deg     40度

                 兼容模式  ：  90  -  40 

4）线性渐变：颜色的分布：

        例如：linear-gradient(方向, 颜色1 20%，颜色2 30%，颜色3 )

　　说明：到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

2：径向渐变：

1）径向渐变：从一个点到四周的颜色的过渡变化。

2）语法：（必须加浏览器前缀）

     background: radial-gradient(center, shape, size, start-color, ..., last-color);

3）说明：

        center：渐变起点的位置，可以为百分比，默认是图形的正中心。

        shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

        size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

  3：重复性渐变：

1）重复性线性渐变

            background:repeating-linear-gradient();

2）重复性径向渐变

            background:repeating-radial-gradient();