📖 CSS渐变知识

线性渐变 (linear-gradient)

沿直线方向过渡颜色。可指定方向（角度或关键词）和多个颜色节点。0deg 为从下到上，90deg 为从左到右，135deg 为左上到右下。

径向渐变 (radial-gradient)

从中心点向外辐射过渡颜色，默认为椭圆形状。常用于制作聚光灯、光晕等效果。

锥形渐变 (conic-gradient)

颜色沿圆锥围绕中心点旋转过渡，可创建色轮、饼图等效果。CSS4 新特性，现代浏览器均支持。

颜色节点 (Color Stops)

每个节点包含颜色值和位置（百分比）。位置可省略，浏览器会自动均匀分布。最少需要 2 个颜色节点，最多可添加任意个。

使用技巧

• 使用 background 属性（而非 background-image）可同时设置回退颜色
• 多个渐变可叠加：background: gradient1, gradient2
• 渐变与 background-size 配合可创建条纹图案
• 透明色 transparent 可创建淡入淡出效果