可以通过多层背景叠加实现linear-gradient与radial-gradient的组合。1. 使用逗号分隔多个渐变作为背景层，前层覆盖后层；2. 上层常用透明或半透明色使底层透出，控制融合效果；3. 实际用于按钮光斑、卡片背景等设计，如径向渐变模拟高光，线性渐变作主色调，通过调整顺序和透明度创造立体视觉效果。
在CSS中，linear-gradient 和 radial-gradient 可以通过背景叠加（background stacking）的方式结合使用，实现更丰富的视觉效果。虽然不能直接将两者嵌套成一个函数，但可以通过多层背景来同时应用线性渐变和径向渐变。
1. 使用多层背景叠加
CSS允许为一个元素设置多个背景层，各层之间用逗号分隔。前面的层会覆盖后面的层，因此要注意顺序。
示例：给一个 div 同时添加线性渐变（从左到右）和径向渐变（中心扩散）：
.gradient-box {
width: 300px;
height: 200px;
background:
linear-gradient(45deg, transparent, rgba(255, 255, 0, 0.4)),
radial-gradient(circle at center, #ff6b6b, #4ecdc4);
border-radius: 12px;
}
在这个例子中，linear-gradient 在上层，增加了斜向透明到黄色的遮罩，而 radial-gradient 作为底层提供主色调过渡。
立即学习“前端免费学习笔记（深入）”；
2. 控制层级与透明度
为了使叠加效果更自然，通常使用 transparent 或半透明颜色，让底层渐变透出来。
技巧：
- 把想要“突出”的渐变放在后面（底层）
- 上层渐变可用透明色制造光影或高光效果
- 调整透明度（rgba 或 hsla）控制融合程度
3. 实际应用场景
这种组合常用于：
- 按钮悬停效果：线性渐变做主色，径向渐变模拟光斑
- 卡片背景：径向渐变营造柔和底色，线性渐变增加方向感
- 登录框装饰：叠加两种渐变创造现代感设计
.fancy-button {
padding: 16px 24px;
background:
radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.7), transparent 20%),
linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
这里先定义一个偏移位置的白色光斑（径向渐变），再叠加蓝紫色线性渐变，形成有立体感的按钮。
基本上就这些。通过合理排列 linear-gradient 与 radial-gradient 的顺序，并利用透明度控制融合，就能创造出复杂的渐变视觉效果。不复杂但容易忽略的是层叠顺序和定位精度。
