| 类型 | CSS 函数 | 特点 |
|---|---|---|
| 线性渐变 | linear-gradient() | 沿直线方向过渡,可指定角度(0°=向上,90°=向右) |
| 径向渐变 | radial-gradient() | 从中心向外辐射,支持椭圆形 |
| 锥形渐变 | conic-gradient() | 围绕中心旋转,适合饼图、色轮 |
| 网格/混合 | 多层叠加 | 多个渐变叠加实现复杂效果 |
| 名称 | 分辨率 | 比例 | 适用设备 |
|---|---|---|---|
| Full HD | 1920 × 1080 | 16:9 | 主流显示器、电视 |
| QHD / 2K | 2560 × 1440 | 16:9 | 高分辨率显示器 |
| 4K UHD | 3840 × 2160 | 16:9 | 4K 显示器、电视 |
| 手机竖屏 | 1080 × 1920 | 9:16 | 智能手机 |
好看的渐变壁纸通常遵循以下原则:
使用 Canvas API 的 createLinearGradient() 或 createRadialGradient() 创建渐变对象,通过 addColorStop(position, color) 添加颜色节点,再将渐变赋值给 fillStyle 并绘制矩形,最终通过 canvas.toBlob() 导出为高分辨率 PNG 文件。