UD5工具箱
为什么我设置的渐变角度和实际显示不一致？
CSS 线性渐变的角度定义是从下往上为 0 度，顺时针旋转。这与数学中的坐标系不同（数学中 0 度通常指向右方）。本工具的角度输入框遵循 CSS 标准，0 度表示从下到上的渐变方向，90 度表示从左到右。如果您期望渐变从上到下，应设置为 180 度。预览区域会实时显示角度对应的实际渐变方向，帮助您直观理解角度与方向的关系。
生成的 CSS 代码是否包含浏览器兼容前缀？
是的，工具生成的代码默认包含 -webkit- 前缀以兼容较旧版本的 Chrome 和 Safari 浏览器。当前主流浏览器（Chrome、Firefox、Edge、Safari 最新版本）都已原生支持渐变属性，如果您只需要兼容现代浏览器，可以删除前缀行以简化代码。工具设置中提供了"精简模式"选项，开启后将只输出无前缀的标准代码。
能否将渐变效果导出为图片文件？
可以。在工具的导出菜单中选择"导出为 PNG"选项，工具会将当前渐变效果渲染到 Canvas 上并导出为 PNG 图片文件。您可以选择导出的分辨率，支持 1x、2x 和 3x 三种缩放比例。导出的图片可以直接用作网页背景图片，适用于需要兼容不支持 CSS 渐变的极端旧版浏览器的场景。
为什么渐变中出现了意料之外的灰色过渡？
这种情况通常发生在颜色停靠点的位置设置不当时。如果某个停靠点的位置值小于前一个停靠点的位置值，浏览器会在重叠区域进行颜色混合，可能产生灰色或浑浊的过渡效果。解决方法是确保所有停靠点的位置值从小到大排列。工具的停靠点列表会自动检测并提示位置值冲突，帮助您快速定位问题。
工具是否支持 Radial Gradient 的离心设置？
支持。在径向渐变模式下，您可以设置渐变中心点的水平和垂直偏移量（使用百分比或关键字）。还可以分别控制水平半径和垂直半径来创建椭圆形渐变。工具提供了可视化的中心点拖拽控制，您可以在预览区域直接拖动中心点来调整位置，非常直观。
如何创建条纹背景效果？
条纹效果可以通过两种方式实现。第一种是使用硬边过渡技巧：将两个相邻颜色停靠点设置在相同的位置，使颜色之间产生锐利边界而非平滑过渡。第二种是使用 repeating-linear-gradient 函数，设置较小的渐变周期使其自动重复。工具的预设库中有多种条纹预设方案，可以作为起点进行调整。条纹的宽度由停靠点的位置差决定，间距由重复周期控制。
收藏的渐变方案存储在哪里？会不会丢失？
所有收藏的渐变方案和操作历史都存储在浏览器的 LocalStorage 中。这意味着数据保存在您的本地设备上，不会上传到任何服务器。需要注意的是，清除浏览器缓存或使用隐私模式浏览时，这些数据可能会被删除。建议定期使用导出功能将收藏方案备份为 JSON 文件，以便在更换浏览器或设备时恢复数据。
能否在渐变中使用 CSS 变量？
工具生成的代码支持使用 CSS 变量。在颜色选择器中，您可以输入自定义变量名（如 var(--primary-color)）替代具体的颜色值。工具会自动将变量名包含在生成的 CSS 代码中。这对于需要实现主题切换功能的项目非常有用，您只需在根元素上修改变量值即可改变所有使用该变量的渐变效果。
为什么全屏预览时渐变效果与小窗口不同？
CSS 渐变默认会拉伸填满整个容器。当容器尺寸改变时，渐变的过渡比例也会相应变化，导致视觉效果产生差异。径向渐变受影响最为明显，因为它的形状可能从圆形变为椭圆形。在设计渐变时，建议在不同尺寸下多次预览效果，确保在各种屏幕尺寸上都能获得理想的视觉表现。