通过伪元素::before和::after结合linear-gradient，可在不修改HTML结构的前提下实现多层渐变背景。1. 基本原理：父容器设为relative定位，伪元素absolute定位并覆盖全区域，通过z-index置于内容下方，应用线性渐变作为背景，常用于卡片、按钮等组件。2. 实现示例：.card::before设置content、宽高100%、对角渐变及z-index:-1，形成美观背景，文字自然显示在上层。3. 多层叠加：利用::before与::after分别设置不同渐变，如.fancy-bg中前者为135deg蓝紫渐变，后者添加白色中心光晕，z-index分层控制，实现丰富视觉层次。4. 注意事项：必须声明content:''才能渲染伪元素；合理使用z-index避免遮挡内容；inset:0简化四边定位；渐变方向可选角度或to语法；透明渐变适用于文字遮罩效果。掌握这些技巧后可灵活构建复杂背景效果。
使用CSS伪元素 ::before 和 ::after 结合 linear-gradient，可以实现丰富的背景渐变效果，同时不污染HTML结构。这种技术常用于创建遮罩层、装饰性边框或增强视觉层次。
1. 基本原理：伪元素覆盖叠加渐变
通过将伪元素定位在内容下方，设置宽高并应用渐变背景，再利用 z-index 控制层级，就能实现背景渐变效果。
常见场景：卡片、按钮、全屏横幅的渐变背景。- 父容器设为相对定位（position: relative）
- 伪元素设为绝对定位，铺满容器
- 使用 background: linear-gradient(...)
- 层级置于内容之下（z-index: -1 或合理值）
2. 实现步骤示例：渐变卡片背景
以下是一个使用 ::before 添加对角渐变背景的卡片：
.card {
position: relative;
width: 300px;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff7e5f, #feb47b);
z-index: -1;
border-radius: 12px;
}
说明：伪元素生成一个对角方向的橙红色渐变层，作为卡片背景，文字自然显示在上方。
3. 多层渐变：结合 ::before 与 ::after
两个伪元素可叠加不同渐变，实现更复杂背景，比如渐变+光晕或纹理叠加。
立即学习“前端免费学习笔记（深入）”；
.fancy-bg {
position: relative;
height: 200px;
}
.fancy-bg::before,
.fancy-bg::after {
content: '';
position: absolute;
inset: 0;
}
.fancy-bg::before {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
z-index: 1;
}
.fancy-bg::after {
background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent);
z-index: 2;
}
说明：::before 提供主渐变色，::after 添加中心光晕，两者叠加提升质感。
4. 注意事项与技巧
使用时注意以下几点避免常见问题：
- 必须设置 content: ''，否则伪元素不会渲染
- 若伪元素在内容下层，z-index 要低于内容层
- 使用 inset: 0 可代替 top/left/right/bottom 四边定位
- 渐变方向可用角度或关键词（to right、to bottom left 等）
- 透明渐变可用于遮罩文字，例如 linear-gradient(to bottom, transparent, black)
