前端小常识总结（渐变色）

1、渐变色

渐变 gradients
水平渐变 linear gradients

语法 background:linear-gradient(direction，color1，color2，……)

Direction

这个参数可以省略 如果省略了默认方向是从上到下
这个参数如果不省略 写方向的起始值 top(从上到下) left(从左到右) right(从右到左)
如果这个参数不省略 这个属性前面需要加前缀或者是 to 终点方向

对角渐变

角度 deg 0代表从下到上 90deg代表从左到右，

渐变的过程

0% 在0%处 是纯红色 20%是纯蓝色 如果最后一个值不是100% 代表从这个值到100%都是纯orange，如果最后一个值是100% 在100%处是纯橙色。

在起点如果不是0 是10% 从0到10%处都是纯红色

径向渐变radial gradients

起点是中心点，向四周渐变

Background:radial-gradient(shape,color,color)

Shape
参数可以省略 如果省略默认是ellipse椭圆形 还有个值是circle 代表圆

渐变过程
0% 在0%处 是纯红色 20%是纯蓝色 如果最后一个值不是100% 代表从这个值到100%都是纯orange，如果最后一个值是100% 在100%处是纯橙色。

在起点如果不是0 是10% 从0到10%处都是纯红色
如

        /*background: linear-gradient(to bottom, #FFC0C0, #FF8D8D);*/
        /*background: linear-gradient(to top, #000000 0%,#ffffff 100%);*/
        /*background-image: linear-gradient(0deg, #FFC0C0 0%, #FF8D8D 100%);*/
        background-image: linear-gradient(0deg, #00DCFF 0%, #00B6FF 100%);