在CSS初级项目里，按钮是最常见的交互元素。很多新手希望按钮既有渐变背景，又有柔和渐变阴影来提升立体感，但写样式时往往发现阴影颜色始终是单色。这是因为box-shadow属性只接受颜色值、模糊半径等参数，并不能解析linear-gradient函数。要实现渐变阴影，需要换一种组合思路，用伪元素或额外图层来模拟。
为什么box-shadow不能直接用linear-gradient
从CSS规范来看，box-shadow的语法结构是box-shadow: offset-x offset-y blur spread color，其中的color位置只认常规颜色，比如十六进制、rgb、rgba，浏览器遇到linear-gradient会直接丢弃整条声明。不少初学者写出下面这样的代码，页面毫无反应还找不到原因。
.btn {
width: 160px;
height: 48px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
/* 错误写法：shadow不支持渐变 */
box-shadow: 0 8px 20px linear-gradient(135deg, #6a11cb, #2575fc);
}
上面这段代码里，box-shadow的值非法，按钮只会显示渐变背景，没有任何阴影。理解这一点很关键：阴影是绘制在元素盒子外部的纯色光晕，它的渲染机制和背景图层完全不同，不能复用渐变函数。
如果强行要达到渐变投影的观感，就得在按钮背后放一个尺寸略大、带了linear-gradient背景并且做了模糊的元素。这个元素透过模糊表现出从一种颜色过渡到另一种颜色的虚影，视觉上就是渐变阴影。
用伪元素实现渐变阴影的完整方案
最干净的纯CSS做法是给按钮加一个::after伪元素，让它绝对定位在按钮下层，背景设为想要的渐变，再用filter模糊或者扩大模糊半径来柔化边缘。这样按钮本身保持清晰，伪元素就是渐变阴影层。
.btn-wrap {
position: relative;
display: inline-block;
}
.btn {
position: relative;
z-index: 1;
width: 160px;
height: 48px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
font-size: 16px;
cursor: pointer;
}
.btn-wrap::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
filter: blur(12px);
opacity: 0.6;
z-index: 0;
}
HTML结构只需要一个包裹层加按钮，不需要额外空标签，保持结构语义化。
<div class="btn-wrap"> <button class="btn">立即体验</button> </div>
这种写法的优点是阴影颜色严格跟随按钮渐变，改背景时只需同步伪元素背景。模糊滤镜让边缘自然消散，比单色阴影更有光感。缺点是伪元素会占用布局空间，如果父级没设position，可能被其他元素盖住，所以包裹层必须relative。
多层box-shadow叠加的折中办法
如果不想用伪元素，也可以用多层单色box-shadow近似渐变感。思路是取渐变中的两个主色，分别做不同模糊度的阴影，一近一远叠加。
.btn2 {
width: 160px;
height: 48px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
box-shadow:
0 4px 10px rgba(106, 17, 203, 0.4),
0 10px 24px rgba(37, 117, 252, 0.35);
}
这个方法兼容性好，任何旧浏览器都支持，代码也短。但严格说它不是真渐变，只是两种颜色阴影的过渡。近距离紫色阴影负责贴近按钮，远距离蓝色阴影铺开底部，肉眼看类似渐变投影。
对比伪元素方案，多层shadow不需要额外标签，也不会引发层叠上下文问题；伪元素方案则视觉更连贯，适合强调品牌色的按钮。初级项目里如果按钮不多，推荐伪元素法，维护更直观。
悬浮交互动画增强
做好了静态渐变阴影，还可以加hover态让按钮浮起。伪元素方案里，hover时加大模糊和透明度，按钮就像被光晕托起。
.btn-wrap::after {
transition: all 0.25s ease;
}
.btn-wrap:hover::after {
filter: blur(18px);
opacity: 0.85;
transform: translateY(4px);
}
加上transition后，鼠标移入按钮，渐变阴影会平滑扩散，用户能明确感知可点击区域。这种细节在落地页或注册入口特别管用，不需要写JavaScript就能有动态反馈。
需要注意的是，如果页面有大量按钮都用模糊伪元素，低端设备可能掉帧，此时退回多层box-shadow更稳妥。总体原则是根据项目体量选方案，初级练习两种都值得试一遍。
CSSlinear-gradientbox-shadow修改时间：2026-08-02 01:57:34