【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总

在CSS中，我们可以使用渐变效果来增强页面的视觉效果。渐变效果可以是线性的，也可以是径向的。以下是24种不同的CSS渐变效果的示例代码：

1. 线性渐变背景：

.linear-gradient-background {
  background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
}

2. 径向渐变背景：

.radial-gradient-background {
  background: radial-gradient(circle, #30CFD0 0%, #330867 100%);
}

3. 线性渐变文本阴影：

.linear-gradient-text-shadow {
  color: white;
  text-shadow: 0 0 10px #30CFD0, 0 0 20px #330867;
}

4. 线性渐变边框：

.linear-gradient-border {
  border: 2px solid transparent;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
}

5. 径向渐变边框：

.radial-gradient-border {
  border: 2px solid transparent;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: radial-gradient(circle, #30CFD0 0%, #330867 100%);
}

6. 线性渐变背景图像：

.linear-gradient-background-image {
  background-image: linear-gradient(to right, #30CFD0, #330867), url('your-image.jpg');
}

7. 径向渐变背景图像：

.radial-gradient-background-image {
  background-image: radial-gradient(circle, #30CFD0, #330867), url('your-image.jpg');
}

8. 线性渐变按钮：

.linear-gradient-button {
  background-image: linear-gradient(to right, #30CFD0, #330867);
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

9. 径向渐变按钮：

.radial-gradient-button {
  background-image: radial-gradient(circle, #30CFD0, #330867);
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: