渐变

1. 线性渐变

background: linear-gradient(to right, red, blue);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(red 50%, blue 50%); /* 硬边界 */

重复线性渐变：

background: repeating-linear-gradient(45deg, #fff 0px, #fff 10px, #000 10px, #000 20px);

2. 径向渐变

background: radial-gradient(circle, red, blue);
background: radial-gradient(circle 100px at center, red, blue);
background: radial-gradient(circle closest-side at 50% 50%, red, blue);

3. 锥形渐变

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
background: conic-gradient(red 0% 30%, blue 30% 70%, green 70% 100%);
background: conic-gradient(from 45deg at 50% 50%, red, blue);

4. 实战效果

/* 渐变文字 */
.gradient-text {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 渐变边框 */
.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, #667eea, #764ba2) border-box;
}