单用 box-shadow 无法表现卡片厚度，因其仅为模糊投影、缺乏底部实边锚点；需配合 border-bottom 与负 spread-radius 阴影形成“近实远虚”层次，并依屏幕尺寸和背景色动态调整参数。
纯 box-shadow 做不出“厚度感”——它只是投影，不是实体边缘。真正模拟卡片物理厚度，得靠 border-bottom（或 border）配合阴影的视觉错觉，否则容易看起来像浮在空中、没着地。
为什么单用 box-shadow 无法表现厚度
阴影本质是光被遮挡后的渐变衰减区域，它不提供明确的底部边界线。当卡片悬停或背景复杂时，用户会本能寻找“接触面”，而缺失的底部实边会让卡片失去重量感和稳定锚点。
-
box-shadow: 0 4px 8px rgba(0,0,0,0.1)只有模糊下缘，看不出卡片到底“多厚” - 深色背景上，阴影甚至可能完全不可见，彻底丢失底部参照
- 移动端触摸反馈弱，缺乏实边会让交互意图不明确
border-bottom + box-shadow 的配比逻辑
关键不是加粗边框，而是让 border-bottom 和 box-shadow 形成“近实远虚”的层次：实边定义厚度，阴影延伸空间感。
-
border-bottom: 2px solid rgba(0,0,0,0.08)—— 颜色必须比阴影更浅、更硬，不能用纯黑 -
box-shadow: 0 2px 6px -1px rgba(0,0,0,0.06)—— 垂直偏移 ≤ 边框宽度，spread-radius设为负值（如-1px）让阴影紧贴底部边缘，避免“漂浮” - 两者颜色透明度差建议控制在 0.02～0.05 之间，差太大显得割裂，太小则无厚度区分
避免 border-bottom 覆盖阴影的渲染陷阱
如果 border-bottom 直接压在 box-shadow 上，浏览器会按层叠顺序绘制：边框在上、阴影在下 → 厚度感被削弱。必须调整渲染层级。
- 给卡片加
position: relative，再用z-index: 1确保自身层叠高于父容器（尤其当父容器有overflow: hidden时） - 别在卡片上同时用
transform: translateY(-2px)和border-bottom—— transform 会创建新层叠上下文，可能切断阴影与边框的视觉衔接 - 若卡片含图片或子元素超出底部，
overflow: hidden会裁掉border-bottom和部分阴影，此时改用padding-bottom预留空间更安全
响应式厚度适配：小屏要更“实”，大屏可更“虚”
手机屏幕像素密度高，细边框+弱阴影易被忽略；桌面端则相反，过重的边框会破坏轻盈感。
- 小屏（
max-width: 480px）：border-bottom: 3px solid rgba(0,0,0,0.1)+box-shadow: 0 1px 3px -1px rgba(0,0,0,0.04) - 桌面端（
min-width: 768px）：border-bottom: 1.5px solid rgba(0,0,0,0.05)+box-shadow: 0 3px 10px -2px rgba(0,0,0,0.08) - 深色模式下，统一改用
rgba(255,255,255,0.06)类浅色边框，避免灰阶混淆
厚度感不是参数堆砌，而是实边与虚影之间的张力控制。最容易被忽略的是：边框颜色必须随背景动态调整，而不是写死一个 #e0e0e0 —— 同一数值在白色和浅灰背景上，视觉重量能差一倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
