本文介绍如何使用 CSS linear-gradient 实现以页面中心为对称轴、由浅蓝（#3498db）向左右两侧渐变为深蓝（#162ba4）的背景效果，无需额外 DOM 元素，仅通过单行 CSS 即可优雅达成。
本文介绍如何使用 css `linear-gradient` 实现以页面中心为对称轴、由浅蓝（#3498db）向左右两侧渐变为深蓝（#162ba4）的背景效果，无需额外 dom 元素，仅通过单行 css 即可优雅达成。
要实现真正对称的水平渐变背景——即颜色在视口中央最亮（浅蓝），并向左右边缘等量变暗（深蓝），关键在于利用三色停靠点（color stop）精确控制渐变过渡位置，而非简单使用双色线性渐变。
原代码中 background: linear-gradient(to right, #3498db, #162ba4) 是从左到右的单向渐变，导致视觉重心偏右，无法满足对称需求。正确做法是将深蓝设为起点和终点，浅蓝置于中间 50% 位置：
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/* ✅ 对称渐变：左深蓝 → 中浅蓝 → 右深蓝 */
background-image: linear-gradient(to right, #162ba4, #3498db, #162ba4);
}
该写法本质是定义了一个三段式渐变：
- 0% 处为 #162ba4（左侧深蓝）
- 50% 处为 #3498db（中心浅蓝）
- 100% 处再次为 #162ba4（右侧深蓝）
浏览器会自动在 0%→50% 和 50%→100% 区间内进行平滑插值，形成完全镜像的对称效果。
⚠️ 注意事项：
- 必须使用 background-image 而非 background 简写，避免覆盖 background-color 或其他背景属性（如后续需叠加图案或固定背景时更可控）；
- 若需增强渐变柔和度，可添加中间过渡色或调整色标位置，例如：
linear-gradient(to right, #162ba4, #295da9, #3498db, #295da9, #162ba4)； - 此方案纯 CSS 实现，不引入额外 HTML 结构，完全兼容 .main-container 等后续元素的层叠与布局，无副作用。
最终效果：无论窗口宽度如何变化，浅蓝始终居中，深蓝均匀延展至两侧边缘，简洁、高效、语义清晰。
