<p>用 linear-gradient 实现静态高度渐变背景需指定方向（如 to bottom）和颜色停靠点；它按元素自身高度100%铺满，不依赖固定高度；必须用 background-image 而非 background-color；现代浏览器兼容良好，旧版 Safari 需加 -webkit- 前缀。</p>
用 linear-gradient 实现静态高度渐变背景
直接写死方向 + 颜色停靠点就能搞定从上到下、从左到右的固定高度渐变。关键不是“高度”本身，而是渐变方向与容器尺寸的配合。
-
to bottom是最常用写法，等价于180deg，颜色从顶部 0% 开始，到底部 100% 结束 - 若容器高度不固定（比如内容撑开），
linear-gradient(to bottom, #ff7e5f, #feb47b)仍会铺满整个高度——它按元素自身高度 100% 计算，不是按视口或文档总高 - 别用
background-color想实现渐变，它只接受单色；必须用background-image: linear-gradient(...) - 兼容性没问题：现代浏览器都支持标准语法，旧版 Safari 需加
-webkit-linear-gradient前缀（仅需保留给 iOS
滚动时动态改色相？用 --hue + hsl() 替代重绘
想让背景色随滚动深度变化（比如滚到一半变橙，到底变紫），不能靠 JS 直接设 style.backgroundColor，那会触发 layout，卡顿明显。
- 在
:root里定义变量：--hue: 0，然后样式中写background-color: hsl(var(--hue), 80%, 60%) - JS 里计算：
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;，再算const hue = Math.min(360, (window.scrollY / maxScroll) * 360); - 更新变量用
document.documentElement.style.setProperty('--hue', hue)，浏览器自动插值渲染，无 layout - 监听滚动必须加
{ passive: true }，否则 Chrome 会警告；节流推荐用requestAnimationFrame，不是setTimeout
伪元素叠加实现“渐变到渐变”的过渡动画
原生 CSS 不支持两个 linear-gradient 之间 transition，直接写 transition: background-image 会失效或跳变。
- 方案是用
::before和::after各画一层渐变背景，初始 opacity 一高一低 - hover 或 JS 触发时，交换 opacity：
.box:hover::before { opacity: 0; } .box:hover::after { opacity: 1; } - 两层渐变结构要一致（同方向、同 stop 数量），否则过渡会错位；颜色 stop 位置建议统一用百分比（如
red 0%, blue 100%） - 注意 z-index 和 background-clip 配合，避免文字被盖住；
pointer-events: none加在伪元素上防止干扰交互
文字颜色渐变为什么 color 不能直接 transition？
因为 color 属性本身不支持渐变值，你写的 color: linear-gradient(...) 是无效的。真正生效的是组合属性。
立即学习“前端免费学习笔记（深入）”；
- 主流做法是：
background-image: linear-gradient(...); -webkit-background-clip: text; color: transparent; - Firefox 支持
background-clip: text但需开启 flag（layout.css.background-clip-text.enabled），所以生产环境仍得靠-webkit-前缀 - 别试图给
color加transition——它只能过渡纯色；想动效就得换思路，比如用mask-image+opacity动画，或 SVG<text>+fill动画 - 移动端 WebKit 内核对
-webkit-text-fill-color和-webkit-background-clip兼容稳定，iOS 15+ 可放心用
实际滚动映射色相时，最容易漏掉 Math.min(scrollY, maxScroll) 这步防超限——初始 scrollY 为 0 时没问题，但快速滚动+页面重排可能让 scrollY 短暂超过 maxScroll，导致 hue > 360，HSL 色环跳回 0°，颜色突变。
