CSS3如何实现渐变效果

在CSS3中，可以使用linear-gradient()和radial-gradient()函数来实现渐变效果。这两种函数分别用于创建线性渐变和径向渐变。

1. 线性渐变（Linear Gradient）

线性渐变是沿着一条直线路径的颜色过渡。使用linear-gradient()函数创建线性渐变，基本语法如下：

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

• direction：可选值有to top、to right、to bottom、to left、angle（角度值）等，表示渐变的方向。
• color-stop：表示颜色过渡的点，可以是颜色值，也可以是百分比或像素值。

示例：

/* 从上到下的线性渐变 */
background-image: linear-gradient(to bottom, red, yellow);

/* 从左上角到右下角的线性渐变，角度为45度 */
background-image: linear-gradient(45deg, red, yellow);

2. 径向渐变（Radial Gradient）

径向渐变是从一个中心点向外扩散的颜色过渡。使用radial-gradient()函数创建径向渐变，基本语法如下：

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape：可选值有circle（圆形）和ellipse（椭圆形），表示渐变的形状。
• size：可选值有closest-side、farthest-side、closest-corner、farthest-corner、具体尺寸值等，表示渐变的大小。
• position：可选值有center、top、right、bottom、left、x% y%等，表示渐变的位置。
• color-stop：表示颜色过渡的点，可以是颜色值，也可以是百分比或像素值。

示例：

/* 圆形径向渐变，从中心到边缘 */
background-image: radial-gradient(circle, red, yellow);

/* 椭圆形径向渐变，从中心到右下角 */
background-image: radial-gradient(ellipse at bottom right, red, yellow);

通过调整linear-gradient()和radial-gradient()函数的参数，可以实现各种复杂的渐变效果。