CSS3渐变怎么写

在CSS3中，可以使用linear-gradient()和radial-gradient()函数来创建渐变效果。以下是两种渐变的基本语法和示例：

线性渐变（Linear Gradient）

线性渐变沿着一条直线方向渐变。

基本语法：

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

参数说明：

• direction：可选值包括to top、to right、to bottom、to left以及具体的角度值（如45deg）。
• color-stop：定义渐变的颜色和位置，可以是颜色值加上百分比或像素值。

示例：

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

/* 使用角度值的线性渐变 */
background-image: linear-gradient(45deg, red, yellow, green);

径向渐变（Radial Gradient）

径向渐变从一个中心点向外圆形或椭圆形渐变。

基本语法：

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

参数说明：

• shape：可选值包括circle和ellipse。
• size：可选值包括closest-side、farthest-side、closest-corner、farthest-corner以及具体的尺寸值（如100px 50px）。
• position：定义渐变的中心点位置，可以是百分比或具体的像素值。
• start-color到last-color：定义渐变的颜色和位置。

示例：

/* 从中心向外的圆形径向渐变 */
background-image: radial-gradient(circle, red, yellow, green);

/* 从左上角开始的椭圆形径向渐变 */
background-image: radial-gradient(ellipse at top left, red, yellow, green);

组合使用

你还可以在一个元素上同时使用线性渐变和径向渐变，通过逗号分隔多个渐变定义。

示例：

/* 同时使用线性和径向渐变 */
background-image: linear-gradient(to bottom right, red, yellow), radial-gradient(circle at center, blue, purple);

通过调整颜色、方向和形状，你可以创建出各种复杂的渐变效果。希望这些示例能帮助你开始使用CSS3渐变！