CSS 渐变简介
WebKit 现在支持 CSS 中指定的渐变。渐变有两种类型：线性渐变和径向渐变。
语法如下
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
渐变的类型是线性或径向.
一个点是两个用空格分隔的值。语法支持数字、百分比或关键字 top、bottom、left 和 right 作为点值。
半径是一个数字，只能在渐变类型为径向时指定。
一个色标是一个函数，color-stop，它接受两个参数，色标值（可以是百分比或 0 到 1.0 之间的数字）和颜色（任何有效的 CSS 颜色）。此外，还支持缩写函数from和to。这些函数只需要一个颜色参数，等同于color-stop(0, ...)和 color-stop(1.0, …)。
援引 HTML5 规范并略微调整语言以使其不特定于 Canvas
“每个色标处的渐变颜色是为该色标指定的颜色。在每个色标之间，颜色和 Alpha 分量必须在 RGBA 空间中进行线性插值，不预乘 Alpha 值以找到在该偏移处使用的颜色。在第一个色标之前，颜色必须是第一个色标的颜色。在最后一个色标之后，颜色必须是最后一个色标的颜色。当没有色标时，渐变为透明黑色。
…
如果在渐变的同一偏移处添加了多个色标，它们必须按添加顺序放置，第一个最靠近渐变起点，后续每个色标都无限接近终点（实际上导致除了每个点上添加的第一个和最后一个色标之外的所有色标都被忽略）。”
线性渐变的点指定一条线。线性渐变必须这样渲染：在起点处及起点之前使用偏移量 0 处的颜色；在终点处及终点之后使用偏移量 1 处的颜色；并且垂直于穿过起点和终点的线的所有点都具有该两条线交叉点处的颜色（颜色来自上述插值）。
如果 x0 = x1 且 y0 = y1，则线性渐变必须不绘制任何内容。
对于径向渐变，前两个参数表示一个起点圆，原点为 (x0, y0)，半径为 r0；接下来的两个参数表示一个终点圆，原点为 (x1, y1)，半径为 r1。
径向渐变必须按照以下步骤渲染
如果 x0 = x1 且 y0 = y1 且 r0 = r1，则径向渐变必须不绘制任何内容。终止这些步骤。
设 x(ω) = (x1-x0)ω + x0
设 y(ω) = (y1-y0)ω + y0
设 r(ω) = (r1-r0)ω + r0
设 ω 处的颜色为所有小于 0.0 的 ω 值的渐变偏移量 0.0 处的颜色，所有大于 1.0 的 ω 值的偏移量 1.0 处的颜色，以及 0.0 ≤ ω ≤ 1.0 范围内 ω 值的给定偏移量处的颜色。
对于所有 r(ω) > 0 的 ω 值，从最接近正无穷大的 ω 值开始，到最接近负无穷大的 ω 值结束，绘制半径为 r(ω) 且位置为 (x(ω), y(ω)) 的圆周，使用 ω 处的颜色，但只绘制在此步骤中此渐变渲染的早期圆尚未绘制过的表面部分。
这有效地创建了一个圆锥，由渐变创建中定义的两个圆接触，圆锥在起点圆（0.0）之前的部分使用第一个偏移的颜色，圆锥在终点圆（1.0）之后的部分使用最后一个偏移的颜色，圆锥外的区域不受渐变影响（透明黑色）。”
那么 CSS 中的渐变到底是什么？它是一种图像，可在以前使用图像 URL的任何地方使用。没错…… 任何地方。 🙂
您可以在以下地方使用渐变
background-image
border-image
list-style-image
content 属性
用作背景的渐变
当将渐变指定为背景时，渐变会成为背景平铺。如果未指定大小，则渐变将根据 background-origin CSS3 属性指定的框进行大小调整。此值默认为 padding，因此渐变将与 padding-box 一样大。这等同于两个方向上都指定 background-size 为 100%。
如果您想实现诸如使用窄条对垂直渐变进行平铺的效果，您应该指定 background-size 来为渐变平铺提供显式大小。
用作背景的渐变将遵循全页缩放，随着页面放大而获得更清晰的分辨率。
边框图像渐变
渐变可以用作边框图像。它们最合理的用途是只指定水平或只指定垂直边框（并在顶部和底部或左侧和右侧边框之间分割渐变）。
渐变图像的大小始终是边框框的大小。
列表项目符号渐变
渐变可以指定为列表项目符号。列表项目符号渐变的一个问题是 WebKit 目前无法指定标记框的大小。因此，无法指定图像的大小。WebKit 因此根据列表项的当前字体大小选择了默认大小。
生成内容渐变
渐变可以在 content 属性中使用。图像将填充其包含块的可用宽度和高度。因此，在使用 ::before 和 ::after 内容中具有指定大小的渐变时，将显示类型设置为 block 或 inline-block 非常重要。
渐变也可以用于图像替换，因此可以与 HTML 中的 img 元素一起使用，或替换 span 和 div 等其他元素的内容。
最后说明
WebKit 现在支持一个通用的生成图像架构，使得将来可以轻松地向 CSS 添加新的生成器效果（如透镜光晕、棋盘格、星爆等）。这些生成图像的大小调整规则将与对没有固有大小的 SVG 内容所做的决定保持一致（两者目前共享相同的规则）。
我们鼓励您尝试渐变，如果您发现任何意想不到或奇怪的行为，请提交 bug。只要您使用多个声明（例如，在一个声明中指定图像，在后续声明中指定渐变），它们在其他浏览器中也能安全降级。