background-color不支持渐变，必须用background或background-image属性；广告容器需单独设样式并确保尺寸稳定，渐变才有效显示。
background 必须用 CSS 设置，HTML 标签本身不支持渐变背景；广告容器（如 <div class="ad-banner">）需单独设样式，不能依赖 <code>body 或全局规则，否则会污染整页视觉。
为什么直接写 background-color: linear-gradient() 无效？
这是最常踩的坑：background-color 只接受纯色值（#fff、rgb(0,0,0) 等），遇到 linear-gradient() 会被浏览器静默忽略，退回到默认透明或继承色。正确做法是用 background 或 background-image：
-
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);✅ 简写推荐 -
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4);✅ 明确语义，便于后续叠加图片或 fallback -
background-color: #ff6b6b;可作为降级色，但必须和background-image同时存在才生效
广告容器尺寸不稳定时，渐变只显示一小块怎么办？
广告位常因 JS 动态加载、响应式断点或内容未渲染导致高度塌陷，height: 100% 无效，渐变只覆盖文字高度。解决关键是脱离内容流约束：
- 给广告容器加
min-height: 80px;（按实际最小高度设，比如横幅广告常见 80–120px） - 避免依赖父容器高度，不写
height: 100%;，除非父级明确设了height且非auto - 若广告需全宽铺满，加
width: 100%;并确认父容器没max-width或padding挤压 - 调试时临时加
border: 1px solid red;查看真实占位范围
如何让广告渐变在移动端不拉伸、不模糊？
移动端视口缩放和 DPR（设备像素比）容易让渐变边缘发虚或颜色带错位，尤其用角度（如 135deg）时。关键控制点：
立即学习“前端免费学习笔记（深入）”；
- 固定渐变画布大小：
background-size: 200% 200%;（不是cover，后者会随缩放重算） - 禁用平铺：
background-repeat: no-repeat; - 居中定位：
background-position: center;（比50% 50%更稳定） - 圆角广告容器要防边缘生硬：
background-clip: padding-box;，避免渐变溢出圆角边界 - 慎用
background-attachment: fixed;——iOS Safari 下易白屏或闪烁，广告场景完全没必要
复杂点在于：广告常嵌在第三方 SDK 或 iframe 里，CSS 隔离严格，body 上写的渐变根本进不去；必须把样式内联或注入到广告容器内部，且优先级要够高（必要时加 !important）。另外，部分广告平台会主动清除内联样式或重置 background，得提前测试渲染结果而非仅看代码。
