使用伪元素模拟渐变阴影效果，通过::before创建偏移的渐变层并结合blur和opacity实现柔和投影，再配合多层box-shadow或背景渐变+外发光提升立体感，三种方法分别适用于不同设计需求。
在CSS初级项目中，使用 linear-gradient 和 box-shadow 组合可以为按钮添加富有层次感的渐变阴影效果。虽然 box-shadow 本身不支持渐变色，但通过巧妙结合 background 和多层阴影，可以实现视觉上的渐变投影装饰。
1. 使用伪元素模拟渐变阴影
由于 box-shadow 不支持渐变，可以通过给按钮添加一个伪元素（::before 或 ::after）来模拟带有渐变的“阴影”效果。
示例代码：
HTML:
<button class="gradient-shadow-btn">点击我</button>
CSS:
.gradient-shadow-btn {
position: relative;
padding: 12px 24px;
background: #fff;
color: #333;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
z-index: 1;
}
.gradient-shadow-btn::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff7a00, #ff0080);
border-radius: 8px;
z-index: -1;
filter: blur(10px);
opacity: 0.6;
}
说明：伪元素创建了一个偏移的渐变层，并通过 blur 和 opacity 模拟柔和的投影效果，看起来像渐变阴影。
2. 多层 box-shadow 模拟渐变感
虽然不能直接用渐变色设置 box-shadow，但可以叠加多个不同颜色和偏移的阴影，近似呈现渐变效果。
立即学习“前端免费学习笔记（深入）”；
CSS 示例：
.multi-shadow-btn {
padding: 12px 24px;
background: #fff;
color: #333;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
box-shadow:
0 4px 6px rgba(255, 122, 0, 0.3),
0 6px 10px rgba(255, 0, 128, 0.25),
0 8px 14px rgba(138, 43, 226, 0.2);
}
这种写法通过叠加橙色、粉红、紫色的阴影，形成色彩过渡的视觉感受，适合轻量级项目。
3. 背景渐变 + 外发光阴影组合
如果按钮本身有渐变背景，可配合外发光（outset shadow）增强立体感。
.glow-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 0 20px rgba(37, 117, 252, 0.5);
}
这里 box-shadow 使用半透明蓝色实现“光晕”效果，与背景渐变呼应，整体更具现代感。
基本上就这些方法。伪元素加模糊是最接近“渐变阴影”的方案，多层阴影适合简单过渡，而发光式阴影则更适用于深色或鲜艳背景按钮。实际项目中根据设计需求选择即可，不复杂但容易忽略细节如 z-index 和 blur 的控制。
