linear-gradient 生效需满足五要素：设宽高或内容撑开、写 background-color 回退色、用正确方向参数（如45deg或to bottom）、现代浏览器无需前缀、伪元素须有 content。文字渐变必用 -webkit-background-clip: text + color: transparent + display: block/inline-block。
background: linear-gradient() 怎么写才生效
渐变色背景不显示，大概率是漏写了 background-color 回退色，或者没设元素尺寸。CSS 渐变本身不是颜色值，而是图像（image 类型），所以必须配合有宽高的容器才能看见。
- 必须给元素设置
width和height（或内容撑开），空 div 默认高为 0 - 推荐始终写回退色：
background: #666; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); - 方向参数别写错：用角度（如
45deg）或关键字（to top、to bottom right），top单独写是无效的 - 旧版 Safari 需要
-webkit-linear-gradient()前缀，但现代项目可忽略（iOS 12+ / macOS 10.14+ 已原生支持）
文字本身怎么填渐变色（不是背景）
纯文字渐变不能直接用 color 设，得靠 background-clip: text + color: transparent 组合实现，且必须加 -webkit- 前缀才生效——这是目前唯一可靠方案，Firefox 和 Chrome 桌面版都依赖该前缀。
- 文字容器需设
display: inline-block或block（inline元素不支持background-clip: text） - 必写三句：
background: linear-gradient(...); -webkit-background-clip: text; color: transparent; - 别漏
-webkit-text-fill-color: transparent，某些浏览器下color: transparent不够稳 - 如果父容器有背景色，记得设
background-color: transparent，否则会遮住渐变
渐变色在伪元素里失效怎么办
用 ::before 或 ::after 做渐变装饰时，常见问题是没设 content: "" 或忘了 position 定位，导致渲染不出来。
- 伪元素必须有
content: ""，否则不生成盒模型 - 推荐用绝对定位：
position: absolute+inset: 0（或top/left/bottom/right: 0）铺满父容器 - 层级问题：确保
z-index合理，渐变层别被文字盖住，也别盖住交互区域 - 如果想做「渐变描边」，别用
border-image（兼容性差），改用box-shadow: inset模拟，或双层伪元素错位叠加
移动端渐变闪烁/性能卡顿
iOS Safari 在滚动时重绘 linear-gradient 背景可能掉帧，尤其搭配 transform 或透明度动画时。根本原因是渐变被当作动态图像反复光栅化。
立即学习“前端免费学习笔记（深入）”；
- 避免在频繁重绘区域（如轮播图标题、吸顶栏）用复杂多色渐变
- 简化色标：从 5 个停靠点减到 2–3 个，
linear-gradient(to right, #f00, #0f0, #00f)比带百分比的更轻量 - 慎用
radial-gradient，它比线性渐变更耗资源，移动端尽量不用 - 真要动效渐变，优先考虑 CSS 变量 +
transition切换预设色值，而不是实时插值渐变函数
渐变本身很简单，但生效条件很具体：尺寸、回退色、前缀、display 类型、伪元素 content —— 少一个就白写。最容易被忽略的是文字渐变必须加 -webkit-background-clip，而且只认 -webkit- 这一套，别试图用标准语法绕过去。
