渐变会影响页面渲染性能吗?
现代浏览器通常会通过 GPU 高效渲染 CSS 渐变。真正需要注意的是,在低性能移动设备上,如果把复杂渐变作为大面积固定背景并叠加在多个区域,可能会带来轻微的重绘成本。
点击轴线任意位置添加色标。双击色标可删除当前断点。
实时预览
在 Hero、卡片和按钮场景里直接验证当前渐变效果。
现代浏览器通常会通过 GPU 高效渲染 CSS 渐变。真正需要注意的是,在低性能移动设备上,如果把复杂渐变作为大面积固定背景并叠加在多个区域,可能会带来轻微的重绘成本。
页面会根据当前色标推导一个代表性的背景色,再分别测试浅色文字和深色文字的对比度,并给出更适合的预览建议。它适合作为编辑阶段的快速判断,但不能替代最终界面中的完整实测。
可以。线性渐变和径向渐变会导出为原生 SVG gradient 定义;圆锥渐变由于 SVG 本身没有原生 conic gradient 语法,因此会使用 foreignObject 包裹的方式输出。