渐变 CSS linear-gradient

1. 渐变

渐变（Gradient）是 CSS3 引入的特性，其定义详见 CSS Images Module Level 3。它本质上是一个 2D 图像，可以对 background-image、list-style-image 和 border 等进行细微着色。

 

1. 渐变本身是没有固有尺寸的，虽然渐变框有具体大小

要想指定一个渐变效果，只需定义这三个元素，即可：

• 渐变线（gradient line）
• 渐变线上的起始点（starting point）和结束点（ending point）
• 在起始点和结束点上的颜色值

这样，颜色就会平滑地填充渐变线上的其余部分。

渐变类型，在几何上，可以是：

• 线段（line）：对应 CSS 的线性渐变（linear gradient）
• 射线（ray）：对应 CSS 的径向渐变（radial gradient）
• 螺旋（spiral）：对应 CSS 的圆锥渐变（conic gradient）

类型语法：

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> |

             <radial-gradient()> | <repeating-radial-gradient()> |

             <conic-gradient()>  | <repeating-conic-gradient()>

1. 渐变三元素：渐变线、起始点和结束点、颜色序列

语法是：

linear-gradient() = linear-gradient(

    [ <angle> | to <side-or-corner> ]?,

    <color-stop-list>

)

/*

参1：角度/渐变颜色走向

to top, to right, to bottom, to left，对应到<angle>分别是 0deg, 90deg, 180deg, 270deg

参2：渐变具体颜色 可接收多个颜色

*/

举例：