应将渐变中的颜色停点抽为独立CSS变量（如--color-start、--color-end），在linear-gradient()中通过var()调用；避免直接将整个渐变赋值给变量，以保持动态可维护性。
怎么用 --gradient-primary 定义可复用的渐变色
CSS变量本身不支持直接在 linear-gradient() 里插值，但你可以把颜色值抽成变量，再拼进渐变函数里。关键不是“整个渐变当变量”，而是“渐变里的关键色 stops 当变量”。
常见错误是写成 --gradient-primary: linear-gradient(135deg, #4facfe, #00f2fe);——这会让变量失去动态调整能力，改个起始色还得重写整条声明。
- 正确做法：拆出
--color-start和--color-end，在用到的地方组合：background: linear-gradient(135deg, var(--color-start), var(--color-end));
- 如果多个组件共用同一组渐变方向和缓动，可以额外定义
--gradient-angle和--gradient-easing（后者需配合transition使用） - 注意：CSS变量作用域是级联的，别在
:root里塞一堆只在按钮里用的渐变色，按模块或主题分块声明更可控
为什么 var(--color-stop-1) 在 background-image 里不生效
因为 background-image: linear-gradient(...) 是一个函数调用，而 CSS 变量必须出现在函数参数位置才能被解析——不能藏在字符串里，也不能靠 JS 拼接后塞进去。
典型翻车现场：
.btn { --stop1: #ff6b6b; background-image: linear-gradient(var(--stop1), #4ecdc4); } 看似合理，但实际会因语法错误 fallback 到纯色。
立即学习“前端免费学习笔记（深入）”；
- 确保变量名拼写完全一致（区分大小写），且已在上级作用域声明（比如
:root或当前选择器的:before伪元素中） - 不要试图用变量控制
linear-gradient的参数类型，例如var(--gradient-type)设为radial或conic—— 浏览器不认这种动态函数名 - 调试时用浏览器开发者工具检查 computed 样式，看
background-image是否显示为完整渐变值，而不是none或降级色
如何让渐变色响应暗色模式自动切换
核心是利用 @media (prefers-color-scheme: dark) 覆盖变量值，而不是重写整条 background 声明。这样既保持结构统一，又避免重复维护两套渐变逻辑。
容易忽略的是：暗色模式下直接套用亮色版渐变常导致对比度不足，甚至文字不可读——变量切换必须带语义，不是简单反色。
- 推荐命名带上下文，比如
--gradient-accent-light/--gradient-accent-dark，而非--primary-1/--primary-2 - 在
:root中设默认值，在媒体查询里只覆盖需要变的部分：@media (prefers-color-scheme: dark) { :root { --color-start: #1e3a8a; --color-end: #3b82f6; } } - 若项目用到了 CSS-in-JS 或构建时主题处理，注意这类工具可能绕过原生媒体查询逻辑，得手动同步变量
linear-gradient 里混用变量和固定色会有什么兼容问题
现代浏览器基本都支持，但老版本 Safari（≤15.4）对 var() 在渐变中的解析有 bug：当变量位于 color stop 位置（如 50% 后）时，可能被忽略或错位。这不是语法问题，是渲染引擎解析顺序缺陷。
例如：
background: linear-gradient(to right, #f0f0f0, var(--accent), #f0f0f0 80%);在 Safari 15.3 下中间色可能不出现。
- 稳妥写法是所有 color stop 都显式声明位置，避免依赖浏览器自动计算：
linear-gradient(to right, #f0f0f0 0%, var(--accent) 50%, #f0f0f0 100%)
- 如果必须支持旧 Safari，把变量转成预编译后的具体值（比如用 PostCSS 插件提前替换），或者降级为双层伪元素叠加模拟渐变
- 别在
repeating-linear-gradient里混用变量——它的周期计算更敏感，各浏览器行为差异更大
