css 利用linear-gradient实现颜色渐变效果

linear-gradient在CSS中是一个渐变功能，它允许你创建一个线性渐变——也就是说，颜色沿直线平滑地过渡。使用这个功能可以在两个或更多颜色之间创建平滑的过渡效果。

linear-gradient的基本语法是：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction （可选）：定义渐变的方向或角度。可以是角度（如45deg），关键词（如to left或to bottom），如果省略，渐变默认从上到下（相当于to bottom）。
• color-stop：定义渐变中的颜色以及这些颜色所处的位置。颜色可以是任何有效的CSS颜色值（如名称、十六进制代码、rgba等）。位置可以是长度（如px、%）来指定其在渐变线上的位置。如果省略位置，浏览器会自动计算位置。

示例：

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

这个例子创建了一个从红色到紫色的水平渐变，其中每种颜色平滑过渡。
效果如下图所示：

浏览器支持linear-gradient功能是CSS3的一部分，大多数现代浏览器都支持无需浏览器前缀即可使用；不过，在早期实现时，可能需要-webkit-、-moz-、-o-或-ms-等前缀，以确保兼容性。

可以通过调整渐变方向和颜色停靠点的数量及其位置，创造出各种各样的渐变背景效果。