linear-gradient需显式指定方向与颜色停止位置（如to right, #3498db 0%, #2c3e50 100%）以避免断层；radial-gradient须用circle at定位圆心；渐变作背景图时宜用伪元素隔离；移动端Safari需规避透明色与纹理抖动问题。
linear-gradient 怎么写才不出现背景色断层
直接写 background: linear-gradient(red, blue) 很容易发现渐变边缘发灰或颜色跳变，根本原因是浏览器默认用 to bottom 方向，但没指定颜色停止位置，导致过渡区间被拉长、中间色稀释。实际要控制节奏就得显式写百分比或长度值。
- 用
linear-gradient(to right, #3498db 0%, #2c3e50 100%)比linear-gradient(#3498db, #2c3e50)更稳，避免不同浏览器插值差异 - 三段以上渐变时，必须手动对齐关键色的位置，比如
#e74c3c 25%, #f39c12 50%, #2ecc71 75%，否则中间色会偏窄或偏宽 - 如果元素高度不定（如文字行高自适应），慎用
deg写法（如45deg），它按绝对角度计算，容器缩放时渐变纹理会变形；优先用to top/to left这类语义方向
radial-gradient 圆心定位不准怎么办
radial-gradient 默认圆心在 50% 50%（正中心），但多数 UI 需求是“从左上角发散”或“聚焦在某个图标下方”，这时必须显式声明位置，且注意语法顺序不能错。
- 正确写法：
radial-gradient(circle at top left, #fff, #ccc)——circle和at之间不能换序，at后必须跟坐标，支持top/center/bottom left/center/right或具体数值 - 如果想让光晕只覆盖按钮局部，用
radial-gradient(circle at 20px 30px, #ff9a9e 0%, transparent 60px)，第二个参数用px明确半径，比百分比更可控 - IE 不支持
at语法，若需兼容，得回退到双值写法radial-gradient(ellipse 100px 50px at 20px 30px, ...)，但现代项目基本可忽略
渐变做背景图时如何避免平铺错位
当把渐变当 background-image 用（比如叠加在图片上），常出现重复平铺或尺寸错乱，本质是渐变本身没有固有尺寸，浏览器按元素宽高拉伸渲染，一旦容器缩放或 flex 布局重排，就会露馅。
- 加
background-size: cover或contain强制缩放匹配，但仅对单层渐变有效；多层叠加时，每层都要单独设background-size - 更可靠的做法是用伪元素隔离：给容器设
position: relative，再用::before绘制渐变并z-index: -1，这样渐变层独立于内容流，缩放互不影响 - 如果渐变要响应深色模式，别用
@media (prefers-color-scheme: dark)重写整个background，而是把颜色变量抽成CSS custom property，例如background: linear-gradient(var(--grad-start), var(--grad-end))，然后只切换变量值
移动端 Safari 对渐变的两个隐藏限制
iOS 15.4 之前，Safari 渲染 linear-gradient 有 1px 纹理抖动，尤其在 retina 屏上明显；另外，带透明度的 radial-gradient 在某些机型上会意外变黑——这不是代码错，是 WebKit 的合成层 bug。
立即学习“前端免费学习笔记（深入）”；
- 抗抖动方案：在渐变色中加入极小的偏移，比如把
#000 0%, #000 100%改成#000 0%, #000 99.9%，强制浏览器走更稳定的插值路径 - 透明 radial 渐变出黑块？改用
rgba(0,0,0,0)替代transparent，前者触发 WebKit 正确的 alpha 合成逻辑 - 真机调试时记得关掉「减少动画」系统设置，它会让 Safari 降级渲染渐变，表现为色带断裂或消失
