双层外阴影需一深一浅、方向相反：一层0 2px 0 2px rgba(0,0,0,0.15)向下，一层0 -2px 0 2px rgba(255,255,255,0.8)向上，均设blur=0、spread=2px，逗号分隔写在同一声明中。
box-shadow 写双层外阴影时参数怎么配才不糊成一团
单层 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 只是浮起，不是凸起。真立体靠一深一浅两个方向相反的外阴影模拟受光与高光：一个向下偏移（0 2px）用中灰（如 #ccc），一个向上偏移（0 -2px）用浅灰或白（如 #fff），且都带正扩展值（2px）强化轮廓。
关键点：
- 两层必须写在同一行、用逗号分隔，不能拆成两个
box-shadow声明，否则后声明覆盖前声明 - 扩展值（第四个参数）建议设为正值（如
2px），让阴影“撑开”边缘，避免模糊半径吃掉轮廓感 - 避免用纯黑/纯白——深色背景上
#fff会刺眼，改用rgba(255,255,255,0.8)；浅色背景上#ccc不够沉，改用rgba(0,0,0,0.15) - 不要加模糊半径（第三参数设为
0），模糊会软化边缘，破坏“硬边凸起”的视觉锚点
:hover 和 :active 状态下 box-shadow 必须联动哪些值
只改 background-color 或只加 transform: translateY(-2px)，按钮像被拎起来，影子却钉在原地——这是最常见割裂感来源。
正确联动方式：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
:hover：v-offset 减小（如从2px→1px），blur 加大（0→2px），再加一层inset 0 1px 2px rgba(255,255,255,0.4)模拟高光反光 -
:active：v-offset 必须为负（如-2px），外阴影弱化（透明度降、模糊略增），内阴影加深（inset 0 2px 4px rgba(0,0,0,0.2)）模拟按压凹陷 -
transition必须单独声明：transition: box-shadow 0.1s ease，不能写transition: all，否则和transform或color抢缓动节奏导致卡顿
父容器 overflow: hidden 导致 :active 阴影被裁切怎么办
按钮按下时 box-shadow 向上偏移（v-offset = -2px），但父元素设了 overflow: hidden，阴影顶部直接被截掉——尤其常见于卡片内部按钮、Modal 底部操作区。
排查与修复：
- 检查按钮直接父级是否含
overflow: hidden，如有，优先改为overflow: visible - 若无法改父级样式，给按钮加足够
padding-bottom（至少等于最大阴影高度），预留裁切空间 - 警惕
flex容器中align-items: center+overflow: hidden组合，容易误裁，可改用margin或justify-content调整垂直位置 - 真机测试必做：模拟器常无法还原
:active实际持续时间与位移量，iOS Safari 尤其明显
深色模式下同一套 box-shadow 为什么失效
同一组 box-shadow: 0 2px 0 2px #ccc, 0 -2px 0 2px #fff 在深色背景上会完全看不见——#ccc 太亮，#fff 直接融进背景，立体感归零。
适配方案很简单，但极易被跳过：
- 用
@media (prefers-color-scheme: dark)单独重写box-shadow，比如换成0 2px 0 2px rgba(0,0,0,0.3), 0 -2px 0 2px rgba(255,255,255,0.1) - 避免依赖命名色（
gray、lightgray），全部改用rgba()，确保明度差在两种模式下都成立 - 如果按钮本身用了
background: transparent，深色模式下更要补text-shadow，否则文字+阴影全消失
真正立体感不靠参数堆叠，而在于阴影方向、明度差、状态变化三者咬合。最容易漏掉的是深色模式适配——它不报错，只是静默失效。
