linear-gradient语法的实际工作原理
CSS的linear-gradient()函数接受一个方向(角度或类似"to right"的关键字),后面跟着一份用逗号分隔的颜色列表,每种颜色都可以附带一个百分比位置。浏览器会沿着这个方向,在每两个相邻色标之间平滑过渡,这也是为什么增加色标数量会让渐变变成更复杂的多段过渡,而不只是简单的双色渐变。
渐变背景和纯色背景的区别
渐变背景能带来纯色无法呈现的视觉层次感和光线方向感,这也是渐变常被用在主视觉区块、按钮、应用图标上的原因。但代价是,如果颜色搭配或角度选得不好,很容易显得浑浊或过时,所以在把代码用到正式项目之前先用实时预览确认效果,其价值要比挑选一个纯色时高得多。
常见问题
生成的CSS代码在所有主流浏览器上都能正常显示吗?
可以。linear-gradient()多年来一直是所有主流浏览器都原生支持、无需加前缀的标准CSS,因此生成的代码在当前的主流浏览器上应该都能直接生效。
渐变生成器也能用来做放射状(radial)渐变吗?
很多生成器专注于最常用的linear-gradient,但"沿路径在多个色标之间过渡"这一核心思路同样适用于CSS另一个独立的radial-gradient()函数,只不过后者是从一个中心点向外扩散过渡。