简解Css3 - linear-gradient

# 概念

CSS linear-gradient() 函数建立一个表示颜色线性渐变的 <image> 。

简单的说，元素只要用了linear-gradient，它等同于一张图片。

即:

background：linear-gradient(...params) ~= background：url(...image)

因此它只能用在图片能够用的地方。如：background、background-image。

不要把它看成颜色用在color等样式中。

# 使用方式

简单起见，只讲一种最通用的使用方式。

background: linear-gradient(angle[角度], color-stop[起始颜色],color-stop[终点颜色]);
复制代码

# 原理

angle描述渐变的方向，单位是deg，它的有效角度值是0-360deg。默认180deg。

几个经常使用渐变角度分别为:

• 从下到上:0deg
• 从上到下:180deg
• 从左到右:90deg
• 从右到左:270deg

以下图所示:

angle的值其实就是以向顶部中央方向为起点顺时针旋转的角度。

0deg时能够看做是上图穿过矩形中心的黑色虚线。

这里咱们要理解下渐变线的概念:

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不一样的点来定义，包括起始点，终点，以及二者之间的可选的中间点（中间点能够有多个）。

图中示例了一个45deg通过矩形中心的渐变线，它的起点就是垂直于渐变线的红点，终点是起点对应的反射点，也就是图上的绿点。

这两点的颜色分别对应着css代码中定义的始末色值，其间则是沿着渐变线不断变化的色值。

不需多言，尽在图中。

# 示例

1 0deg 蓝色起点 红色终点

background: linear-gradient(0deg, blue, red);
复制代码

2 45deg 蓝色起点 红色终点

background: linear-gradient(45deg, blue, red);
复制代码

# 参考

• MDN-linear-gradient