CSS 渐变：炫彩 Hero 区域

CSS 渐变

渐变是用 background 属性实现的，不是 background-color。

线性渐变

/* 从上到下 */
background: linear-gradient(#3b82f6, #1e40af);

/* 指定方向 */
background: linear-gradient(to right, #f59e0b, #ef4444);

/* 指定角度 */
background: linear-gradient(135deg, #667eea, #764ba2);

径向渐变

background: radial-gradient(circle, #fff, #ddd);

实用技巧

/* 文字渐变 */
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;