可通过CSS实现HTML5按钮双层阴影：一、box-shadow多值叠加；二、伪元素分层定位；三、filter: drop-shadow与box-shadow共用；四、嵌套容器结构分离阴影。
如果您希望为HTML5按钮添加双层阴影效果，可以通过CSS的box-shadow属性实现多层阴影叠加。以下是实现该效果的具体方法：
一、使用多层box-shadow值
box-shadow属性支持同时定义多个阴影，各层之间用逗号分隔，浏览器会按书写顺序由外向内逐层渲染。通过合理设置偏移量、模糊半径和扩展半径，可构造出清晰的双层阴影结构。
1、在按钮元素的CSS样式中，设置box-shadow属性，输入两组阴影参数，格式为：水平偏移 垂直偏移 模糊半径 扩展半径 颜色。
2、第一层阴影设为较大模糊半径与轻微偏移，用于营造外围柔光效果；第二层阴影设为较小模糊半径与稍大偏移，形成紧贴按钮边缘的硬质投影。
立即学习“前端免费学习笔记（深入）”；
3、例如：box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1), 0 8px 24px -4px rgba(0,0,0,0.15)；其中第二组阴影的垂直偏移值必须大于第一组，且模糊半径更大，才能确保视觉上呈现内外两层层次。
二、结合伪元素叠加阴影
利用::before或::after伪元素创建独立于按钮本体的遮罩层，并为其单独设置阴影，可突破box-shadow单属性的层级限制，实现更可控的双层阴影分离效果。
1、为按钮设置position: relative，确保伪元素能相对于按钮定位。
2、添加::before伪元素，设置content: ""、position: absolute、top: 0、left: 0、width: 100%、height: 100%，并应用第一层阴影。
3、添加::after伪元素，同样设置基础定位与尺寸，但调整z-index为-1，再应用第二层阴影；z-index为-1可使该阴影位于按钮内容之下，形成底层衬托效果。
三、使用filter属性叠加drop-shadow
filter: drop-shadow() 是一种基于图像处理的阴影方式，可独立于box-shadow运行，与box-shadow共存时即构成物理层与渲染层的双重阴影结构。
1、先为按钮设置常规box-shadow，作为主体投影。
2、再添加filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.15))，该阴影不受border-box影响，直接作用于元素Alpha通道轮廓。
3、注意drop-shadow不支持inset，且无法设置扩展半径，仅适用于外阴影叠加场景。
四、嵌套容器法实现阴影分层
通过HTML结构嵌套，将按钮置于一个带阴影的外层容器中，按钮自身再设置另一组阴影，从而在DOM层级上天然分离两层阴影。
1、在外层
2、内部
3、控制外层div的padding值，确保两层阴影在视觉上不完全重合；推荐padding值不小于内层按钮阴影的垂直偏移量，避免内层阴影被外层裁剪。
