开发与网页
怎么做 CSS 渐变
你想给页面、卡片或幻灯片加渐变背景，但手写 CSS 反复试太慢。你会选好类型、摆好颜色，然后复制能直接粘贴的 CSS，或保存成图片。它在浏览器里运行。
渐变上的文字要在两端都看得清。用你打算用的文字颜色，分别试试最浅和最深的颜色。
打开CSS 渐变生成器目录
选渐变类型
线性沿直线过渡，适合大多数背景。径向从中心向外扩散，像一团柔和的光。锥形绕着一个点旋转，像色轮或饼图。
三种类型的区别在于颜色走的路径。 打开 cv.cm 的 CSS 渐变生成器
在「渐变」下选类型。点一个预设作为起点，或点「随机」找灵感，预览会马上更新。
打开CSS 渐变生成器设置方向
线性和锥形拖动「角度」：0° 朝上，90° 朝右，180° 朝下。径向则改选「圆形」或「椭圆」。
摆放颜色
每个颜色都有一个 0% 到 100% 的位置，最多可用 6 个。「添加颜色」插入一个，× 删除一个。位置靠得近，边缘就锐利；离得远，过渡就柔和。
每个颜色都在线上有一个位置，CSS 按顺序列出它们。 复制 CSS
「复制 CSS」给你两行：一行是给很老的浏览器用的纯色，一行是渐变。把它们粘贴到元素的 CSS 规则里。任何有尺寸的块都能用，比如 body 或卡片。
或者保存 PNG
做幻灯片和壁纸时，选好「图片尺寸」再点「保存 PNG」。尺寸包括 1920 × 1080、2560 × 1440、手机用的 1080 × 1920 和方形帖子用的 1080 × 1080。
常见问题
为什么页面上显示不出渐变？
元素很可能没有高度。渐变填满元素的盒子，而空的块高度是 0。给它设高度或加些内容；要铺满整页，把 html 和 body 的高度设为 100%。
CSS 里为什么有两行 background？
第一行是纯色，第二行是渐变。画不了渐变的浏览器会忽略那一行，保留纯色。
用 background 还是 background-image 好？
都可以，因为渐变算作图片。background 更短，但也会重置其他背景设置，所以要叠在其他背景上时用 background-image。
怎么做出边界清晰的色条？
把两个颜色放在同一位置，比如都放在 50%。这样就没有过渡的空间，颜色在一条清晰的线上直接变化。
为什么 PNG 看起来有色带？
相近颜色之间的超宽渐变可能出现淡淡的台阶，因为 PNG 每个颜色通道只存 256 级。换差别更大的颜色，或在修图软件里加一点纹理。