linear-gradient 应单独用 background-image 设置以保留 background-color 降级色；若用 background 简写会完全覆盖 background-color，导致底色失效。
直接用 background 写 linear-gradient，别和 background-color 混用
CSS 中 background-color 和 background: linear-gradient(...) 是互斥的——后者会完全覆盖前者。如果你写了：
nav {
background-color: #333;
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}那么 background-color 实际不会生效，浏览器只认 background 的完整声明。
linear-gradient 必须写全 background 属性或加 background-image
想保留其他背景行为（比如背景尺寸、位置、重复），推荐用 background-image 单独设置渐变：
nav {
background-color: #222; /* 底色，降级 fallback */
background-image: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
}这样 background-color 会作为渐变加载失败或不支持时的兜底色，且不会被覆盖。
IE 兼容性要注意前缀和语法差异
旧版 IE（linear-gradient，IE10–11 需要 -ms- 前缀，且方向参数是数字角度（不是 to right）：
nav {
background-color: #333;
background-image: -ms-linear-gradient(left, #ff6b6b, #4ecdc4); /* IE10–11 */
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4); /* 标准 */
}现代项目若已放弃 IE，可省略前缀；但若需兼容，必须同时提供带前缀和标准写法，且注意方向值不能混用（to right 在 IE 中无效）。
渐变做导航栏背景时容易糊或拉伸变形
导航栏高度常为固定值（如 60px），而默认渐变会平铺或拉伸到整个元素尺寸，导致色块模糊或方向错乱：
- 用
background-size: 100% 100%强制贴合容器（适合单色过渡） - 若导航有 hover 动效，避免在
:hover里只改background-color——它对渐变无效，得重写整个background-image - 深色渐变下文字可读性下降，记得配
color或用backdrop-filter加毛玻璃效果（注意 Safari 兼容性）
