如何在真实页面上制作并检查 CSS 渐变。
指定方向、色标和使用表面。凡文字覆盖处都应检查对比度，需要时提供纯色后备方案。
按任务需求调整流程。
确定表面、方向、色标及后备色，再生成 CSS 声明。测试叠加内容后方的整个渐变及响应式裁切。将文字对比度与背景美观分开判断。
- 你需要提供什么
- 颜色、方向和视觉要求。
- 你会得到什么
- 参数可编辑的有效 CSS 渐变。
查看输入和结果。
演示用输入和输出 · 教学示例，并非 WebAct 实时运行结果
示例 个输入项
Create a left-to-right background from #fff7ed to #fed7aa, with a solid fallback.
完整示例
background-color: #fff7ed; background-image: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%); Check any foreground text against the full gradient, not just one endpoint.
将这份输入载入提示词，再复制到 WebAct 中尝试任务。实际结果可能与示例不同。
决策与问题排查。
只检查渐变一端的文字对比度足够吗？
不够。文字可能跨过对比度更低的区域。检查实际位置与状态。
渐变方向为何与设计预期不同？
角度规则和元素几何形状会影响外观。把声明渲染在目标表面检查。
使用自己的资料试一试。
将任务提示词中的示例换成你的材料。保留所需条件，再把任务复制到 WebAct。
自定义并复制任务 ↑