CSS实现背景颜色的优雅渐变效果

在CSS中，你可以使用linear-gradient()函数来设置背景颜色的渐变。这个函数允许你定义两种或更多种颜色，并指定它们之间的过渡方向。

以下是一个简单的例子，它展示了如何设置一个从上到下渐变的背景颜色：

body {  
    /* 定义一个从上到下的线性渐变，从红色开始，渐变到蓝色 */  
    background: linear-gradient(to bottom, red, blue);  
}

你还可以指定更多的颜色停止点（color stops），并控制它们之间的位置。例如：

body {  
    /* 定义一个从上到下的线性渐变，从红色开始，在50%处变为黄色，最后在底部变为蓝色 */  
    background: linear-gradient(to bottom, red, yellow 50%, blue);  
}

此外，你还可以使用角度参数来改变渐变的方向。例如，linear-gradient(45deg, red, blue)将创建一个从左下角到右上角的45度角渐变。

最后，你还可以使用百分比或像素值来更精细地控制颜色停止点的位置。例如：

body {  
    /* 定义一个从左到右的线性渐变，在20%处从红色开始，在80%处变为蓝色 */  
    background: linear-gradient(to right, red 20%, blue 80%);  
}

记住，to right、to left、to top和to bottom是预定义的关键字，用于指定渐变的方向。你也可以使用角度值（如45deg）来指定任何你想要的方向。