CSS 渐变

CSS 渐变（gradient）是由 CSS 直接绘制出来的图像，在两个或多个颜色之间做平滑过渡。它的类型是 <image> 而不是颜色，所以要写在接受图像的属性上——最常见的是 background-image（或 background 简写），不能直接赋给 background-color。

常用的渐变函数有：

• linear-gradient()：沿一条直线过渡，方向可用角度（45deg）或关键字（to right）指定；
• radial-gradient()：从中心点向外呈圆形或椭圆扩散；
• conic-gradient()：颜色绕中心点旋转一圈，常用来做色轮、饼图。

每个函数都有对应的 repeating- 版本，可平铺成条纹。渐变由「色标」(color stop) 控制，用百分比或长度指定每个颜色的位置；把相邻两个色标设成同一位置就能得到硬边界而非过渡。要注意 linear-gradient 的角度以「向上」为 0deg、顺时针增大，90deg 指向右，和数学坐标系不同。渐变本质是图像，可以和其他背景层叠加，也能配合 background-clip: text 做文字渐变。