# 概念
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);