从线性渐变到径向渐变再到动态流动,说明 CSS 渐变生成里最常用的参数和落地方法。
先分清线性与径向
线性渐变按角度推进,适合按钮、横幅和整体背景;径向渐变从中心向外扩散,适合聚焦和强调。
生成工具里先选对模式,再调颜色和位置,通常比直接改色值更可控。
动态渐变要克制使用
动态流动会引入动画,适合氛围区或头图,但不要用在所有背景上,否则页面会一直很抢眼。
开启动态后会输出带 keyframes 的 CSS,落地时注意保留动画参数和时长。
落地前检查对比度
渐变背景上叠加文字时,先确认文字可读性,尤其是浅色渐变配白色文字的情况。
复制代码后在真实组件上验证一遍,避免色差和透明度与设计稿不一致。