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 布局重排，就会露馅。
