渐变生成器及颜色取值方式

一、渐变生成器（自己敲一下，效果就一目了然了）

1、线性渐变——linear-gradient()

常见的写法

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

2、径向渐变——radial-gradient()

常见写法

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

ellipse     椭圆
circle     圆
closest-corner     最近的角落
closest-side     最近的边
farthest-corner     最远的角落
farthest-side      最远的边

二、ColorName、HEX、RGB

具体颜色名称查阅此链接

三、RGBA

rgba记法，在rgb的基础上添加一个透明度（0-1）的值，例如：rgba( 128, 0, 0, 0.3)

四、HSL(色调，颜色饱和度，亮度)

色调——0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
饱和度——取值为：0.0% - 100.0%
亮度——取值为：0.0% - 100.0%

五、HSLA(色调，颜色饱和度，亮度，透明度)

色调——0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
饱和度——取值为：0.0% - 100.0%
亮度——取值为：0.0% - 100.0%
透明度——取值0 - 1之间。

六、transparent 全透明