【css】渐变-背景渐变、边框渐变、文字渐变

背景渐变：

/* 线性渐变，从上到下 */
.background-gradient {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 径向渐变，从中心到边缘 */
.background-gradient {
  background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}

边框渐变：

/* 不同浏览器的前缀可能不一样，这里以webkit为例 */
.border-gradient {
  border: 2px solid #33ccff;
  border-image: -webkit-linear-gradient(to right, red, yellow, green);
  border-image: linear-gradient(to right, red, yellow, green);
}

文字渐变：

.text-gradient {
  background: -webkit-linear-gradient(45deg, #ff99cc, #33ccff);
  background: linear-gradient(45deg, #ff99cc, #33ccff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

以上代码实现了背景、边框和文字的渐变效果。注意，为了兼容不同浏览器，可能需要添加不同浏览器的前缀（如-webkit-）。