CSS渐变效果：linear-gradient() 与 radial-gradient()

在 CSS 中，linear-gradient() 和 radial-gradient() 函数来创建渐变效果。以下是一些常见的 CSS 渐变示例：

// 示例图1：
background: radial-gradient(#ff0000,15%, #00ff00, 20%,#0000ff,60%,pink,75%,pink);
// 示例图2：
background: linear-gradient(#ff0000,30%, #00ff00, 50%,#0000ff,80%,pink);
// 示例图3（角度式）：
background: linear-gradient(45deg, deeppink, yellowgreen,red);
// 示例图3（方向式）：
background: linear-gradient(to right bottom, deeppink, yellowgreen,red);

一、线性渐变（Linear Gradient）：

1.从顶部到底部的垂直渐变：

background: linear-gradient(to bottom, #ff0000, #0000ff);

2.从左上角到右下角的对角线渐变：

background: linear-gradient(to bottom right, #ff0000, #0000ff);

3.自定义角度的线性渐变：

background: linear-gradient(45deg, #ff0000, #0000ff);

二、径向渐变（Radial Gradient）：

1.从中心向边缘的径向渐变：

background: radial-gradient(circle, #ff0000, #0000ff);

2.从椭圆中心向边缘的径向渐变：

background: radial-gradient(ellipse at center, #ff0000, #0000ff);

三、渐变色停止点（Color Stops）：

1.在渐变中添加多个颜色停止点：

background: linear-gradient(#ff0000, #00ff00 50%, #0000ff);

这些示例仅展示了渐变的基本用法，您可以根据需要自由组合不同的颜色、方向和停止点来创建更复杂的渐变效果。