linear-gradient()需显式声明至少两个不同颜色，避免与background-color冲突、方向大小写敏感；radial-gradient()应指定circle/ellipse、at定位和closest-side等尺寸；文字叠加时用background-clip: text或半透遮罩保障可读性；兼容需加-webkit前缀并注意safari旧版bug。
background-image: linear-gradient() 怎么写才不透明
直接用 linear-gradient() 做背景时，如果没指定颜色透明度或 fallback 色，常出现“渐变没生效”“背景全黑/全白”的错觉——其实不是没渲染，而是起止色相同、方向写反、或被后续 background-color 盖住了。
- 务必显式声明至少两个色值，例如
linear-gradient(to right, #ff6b6b, #4ecdc4)；只写一个色会退化为纯色 - 避免和
background-color同时使用且未设透明通道：后者会叠在渐变下方，视觉上“吃掉”渐变；如需底色，改用带 alpha 的色值（如rgba(255, 107, 107, 0.9)）或删掉background-color - 方向关键词大小写敏感：
to right可用，TO RIGHT无效；135deg比to bottom right更精确可控
radial-gradient() 的圆心位置和尺寸怎么调才自然
radial-gradient() 默认从元素中心发散，但真实 ui 中常需偏移焦点（比如按钮高光、卡片悬浮浮雕感），这时必须手动控制 circle/ellipse、圆心坐标和尺寸。
- 圆心用
at x y定位，单位支持%、px、em；例如radial-gradient(circle at 20% 30%, #fff, transparent)把高光点拉到左上区域 - 不加
circle或ellipse时，浏览器按元素宽高自动选形状；想要稳定圆形高光，必须显式写circle - 尺寸参数（如
closest-side）影响边缘过渡长度：用farthest-corner易导致色标外溢变灰，小容器建议优先试closest-side
渐变叠加文字时，文字看不清怎么办
把文字放在渐变背景上，最常见问题是对比度崩坏——尤其浅色字压在亮部、深色字陷进暗部。这不是渐变写错了，是缺少对比保障机制。
- 别依赖人眼调色：用
background-clip: text+-webkit-text-fill-color: transparent让文字“变成渐变”，比直接放上面更可靠 - 加一层半透遮罩最省事：
::before伪元素盖在背景上，设background-color: rgba(0,0,0,0.2)，再把文字放顶层 - 检查 WCAG 对比度：工具如 chrome DevTools 的 Accessibility 面板能实时标出不合规区域；渐变中段色差最危险，要重点测
旧版 Safari 和 IE 对渐变的支持边界在哪
IE10+ 支持 linear-gradient() 但需 -ms- 前缀；Safari 6.1+ 才支持无前缀 radial-gradient()，而 Safari 5.1 仅认 -webkit-radial-gradient()。现在虽可放弃 IE，但 ios 12–13 的 Safari 仍可能遇到渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 线性渐变兼容写法：先写标准语法，再紧接一行
-webkit-linear-gradient()，顺序不能颠倒（旧引擎忽略不认识的声明） - 径向渐变在 Safari 12.1 有 bug：
at定位失效，圆心固定居中；若需精准偏移，得用background-position配合小尺寸渐变图模拟 - 所有渐变都不支持 css 变量直接插值（如
linear-gradient(to right, var(--c1), var(--c2))在部分 Safari 版本会回退为纯色）
实际项目里，渐变最难的从来不是语法，而是它和布局尺寸、文字层级、设备渲染策略搅在一起时，哪一环动了都会牵出新问题。多在真机上切几屏，比对着规范文档猜强得多。