微信小程序的阴影实现，表面上看是个简单的样式问题，但实际开发中很多开发者都会遇到“阴影不显示”、“阴影太生硬”、“不同机型效果不一致”这类让人头疼的情况。今天咱们就彻底把这个事情聊透，从最基础的实现到高级的调优技巧，一次性解决所有阴影相关的问题。

一、最容易被忽视的阴影基础：box-shadow 的正确写法

以为阴影就是加一行 box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1) 就完事了。但实际在小程序里，由于渲染机制和 CSS 标准略有差异，有 3 个关键点必须注意：

第一个关键点：单位必须用 rpx 吗？ 不一定。阴影的模糊半径和扩展半径用 rpx 可以保证在不同屏幕下等比缩放，但如果你希望阴影效果在 iPhone 和 Android 上看起来“绝对大小”一致，用 px 更稳定。我一般推荐核心 UI 元素（比如卡片、弹窗）用 rpx，装饰性阴影（比如按钮 hover 态）用 px。

第二个关键点：颜色值的透明度很重要。 同样是黑色阴影，rgba(0,0,0,0.08) 和 rgba(0,0,0,0.2) 的视觉差异巨大。建议用一个变量统一管理阴影透明度，比如在 app.wxss 里定义 --shadow-light: 0 4rpx 12rpx rgba(0,0,0,0.06);，这样后期调整整体风格时只需要改一个值。

第三个关键点：不要忘记 inset。 内阴影（inset）在小程序中经常被用来做“凹陷”效果，比如输入框聚焦时的状态。但写内阴影时忘记加 inset 关键字，导致阴影跑到外面去了。正确的写法是：box-shadow: inset 0 2rpx 4rpx rgba(0,0,0,0.1);

二、实战：给卡片加阴影，但不要“脏兮兮”的感觉

很多开发者的卡片阴影看起来脏兮兮的，是因为用了纯黑色阴影且不透明度太高。咱们用一个电商小程序里的商品卡片来举例：

先看错误示范：

.card {
  box-shadow: 0 2rpx 10rpx #000;
}

这种写法下，阴影是纯黑色，模糊半径小，看起来就像卡片底下垫了一张脏纸。正确的做法是：

.card {
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

这里用了 3 个技巧：垂直偏移 8rpx（让阴影向下延伸更自然）、模糊半径 24rpx（边缘过渡柔和）、透明度 0.08（极淡的阴影，只增加层次感不抢内容）。

如果你想要更“高级”的阴影效果，可以叠加两层阴影：

.card {
  box-shadow: 
    0 2rpx 4rpx rgba(0, 0, 0, 0.04),
    0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

第一层阴影贴近卡片边缘，模拟环境光；第二层阴影距离远，模拟主光源。这种叠加效果在苹果官方的 UI 设计中很常见，微信小程序完全支持。

三、阴影不显示的 5 个常见原因和排查方法

我遇到过很多次：明明写了 box-shadow，但预览时就是看不到。下面这 5 个原因挨个排查：

1. 元素没有设置背景色。 如果元素背景是透明的，阴影会被下层内容“吃掉”。给元素加上 background: #fff; 或者你需要的背景色即可。

2. 元素设置了 overflow: hidden。 如果父容器有 overflow: hidden，子元素的阴影超出部分会被裁剪。解决方案：把阴影写在父容器上，或者调整父容器的 padding 给阴影留出空间。

3. 使用了伪元素但没设置 content。 如果你用 ::before 或 ::after 做阴影，必须写 content: '';，否则伪元素不渲染。

4. 单位写错了。 比如把 rpx 写成 rpx 以外的非法单位，或者多个值之间忘了加空格。建议用微信开发者工具的“WXML 面板”检查样式是否生效。

5. 组件模式下的样式隔离。 如果你在自定义组件里写阴影，需要在 options 里设置 styleIsolation: 'apply-shared' 或者用外部样式类，否则父页面的阴影样式可能覆盖不了组件内部。

四、进阶技巧：用阴影实现“毛玻璃”和“悬浮动效”

阴影不只是用来做卡片层次感的，结合其他 CSS 属性可以做出惊艳的效果。

毛玻璃效果（Glassmorphism）： 这种风格在微信小程序里很流行，比如个人中心页面的背景卡片。实现需要三步：

.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

注意：backdrop-filter 在部分低端 Android 机型上可能不支持，建议配合 @supports 做降级处理。降级方案是直接用半透明背景色代替模糊效果。

悬浮动效（Hover 阴影变化）： 虽然微信小程序没有 CSS 的 :hover 状态，但可以用 hover-class 属性实现类似效果。比如一个按钮：

<button class="btn" hover-class="btn-hover">点击我</button>

.btn {
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
.btn-hover {
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
}

这里用 transition 让阴影变化有平滑过渡，用户体验会好很多。但注意 hover-class 在真机上只有手指按下时触发，抬起瞬间恢复，所以过渡时间不宜过长（0.2-0.3秒最佳）。

五、不同机型的阴影适配问题

这是个大坑。同样的阴影代码，在 iPhone 13 上看着很舒服，在红米 K40 上就变得特别生硬。原因在于不同设备的像素密度和渲染引擎对 box-shadow 的解析有细微差异。

解决方案有两个：

方案一：使用 CSS 变量做机型适配。 在 app.wxss 里通过媒体查询区分设备：

/* 默认阴影（针对 iOS） */
:root {
  --card-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
}
/* 针对 Android 低分辨率设备 */
@media screen and (min-resolution: 1.5dppx) {
  :root {
    --card-shadow: 0 6rpx 18rpx rgba(0,0,0,0.06);
  }
}

方案二：用图片代替阴影。 如果某个阴影效果在真机上怎么调都不对，干脆用切图。比如用一张带透明渐变效果的 PNG 图片作为元素的 background-image，绝对定位在元素底部。虽然有点“笨”，但在兼容性上是 100% 可靠的。

六、扩展：用阴影模拟“3D 按钮”和“层级关系”

阴影的另一个妙用是模拟物理世界的高度感。比如一个浮动的操作按钮（FAB），可以用多层阴影让用户感觉到“这个按钮浮在界面上方”：

.fab {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 
    0 4rpx 8rpx rgba(0,0,0,0.2),
    0 12rpx 32rpx rgba(102, 126, 234, 0.3);
}

这里第二层阴影用了和按钮主色相同的颜色（带透明度），这样阴影会带有淡淡的紫色调，比纯黑色阴影更和谐。这种“彩色阴影”技巧在 Material Design 中非常常见。

再比如，模拟两个卡片之间的前后层级关系。假设 A 卡片在 B 卡片上方，A 的阴影应该覆盖在 B 上。这时候需要给 A 设置 z-index 高于 B，并且 A 的阴影模糊半径要稍大一些（比如 16rpx），而 B 的阴影模糊半径小一些（比如 8rpx），这样视觉上 A 就“浮”在 B 上方了。

七、性能优化：阴影不要滥用

阴影虽然好看，但渲染成本不低。如果你在一个页面里同时渲染几十个带阴影的卡片，在低端机型上可能会出现掉帧。优化方法：

1. 用 will-change 提示浏览器。 给频繁变化的阴影元素加上 will-change: box-shadow;，但不要加在太多元素上，否则会消耗内存。

2. 减少阴影层数。 能用单层阴影实现的效果就不要用两层。如果必须用多层，考虑用伪元素代替其中一层。

3. 动画时用 transform 代替阴影变化。 比如一个卡片点击放大的效果，用 transform: scale(1.02) 配合轻微的阴影变化，比单独改变阴影值性能更好。因为 transform 是由 GPU 加速的，而 box-shadow 变化会触发重绘。

最后提醒一句：阴影的最终效果一定要在真机上预览。微信开发者工具的模拟器里看到的阴影和真机差很多，尤其是透明度、模糊半径这些参数，模拟器里觉得刚好，真机上可能就过重或过轻。多拿几台不同价位的手机测试，才能保证你的阴影在大多数用户眼里都是“高级”的。