纯CSS立体按钮的关键在于box-shadow方向、linear-gradient明度差、transform位移三者符合物理常识；双层阴影需顶部高光（负偏移）在前、底部投影（正偏移）在后；:active状态须同步下沉位移与加厚柔化阴影；移动端需用<button>、ontouchstart及touch-action确保响应。
纯 CSS 就能做出真正有“按下去”反馈的立体按钮，关键不是加多少阴影，而是 box-shadow 方向、linear-gradient 明度差、transform: translateY() 位移三者必须对齐物理常识——写反了，按钮就不是“按下去”，而是“跳起来”。
box-shadow 双层外阴影怎么写才不浮在页面上
单层 box-shadow: 0 4px 6px rgba(0,0,0,0.2) 只会让按钮像贴纸一样飘着。真立体靠的是顶部高光 + 底部投影的协同：
- 浅色高光必须写在前面：
box-shadow: 0 -2px 0 2px #fff（负 vertical offset 表示顶部亮边） - 深色投影紧随其后：
, 0 3px 6px rgba(0,0,0,0.15)（正 vertical offset 表示底部暗影） - 顺序不能错：浏览器按书写顺序渲染，后写的会盖住前写的；高光必须在前才能透出来
- 移动端慎用大
blur值（如 >12px），模糊边界会吞掉点击热区
:active 状态下 translateY 和 box-shadow 必须怎么联动
只改背景色或只加 opacity，用户完全感知不到“按下”。真实按压是下沉 + 受压变形：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
transform: translateY(2px)（注意是向下位移，不是向上） -
box-shadow同步变厚变柔：0 4px 8px rgba(0,0,0,0.25)（y 偏移增大、blur 加大） - 过渡必须写在默认状态：
transition: transform 0.18s, box-shadow 0.18s - 别写
transition: all——容易拖慢其他无关动画，比如color或font-size
移动端 :active 不触发的三个硬性补救点
iOS Safari 和部分安卓 WebView 对 :active 响应有延迟或直接不触发，尤其用 <div> 代替 <button> 时更明显：
立即学习“前端免费学习笔记（深入）”；
- 优先用语义化
<button>，它原生支持:active且无障碍友好 - 若必须用
<div>，加ontouchstart=""属性（空值即可），绕过 300ms 延迟 - 补一句
cursor: pointer和touch-action: manipulation，提前激活点击态 - 真机测试必不可少——模拟器常无法还原
:active的实际持续时间与位移量
最容易被忽略的是阴影书写顺序和 :active 的位移方向，物理直觉比代码更重要；深色背景上，别用纯黑阴影，改用同色系暗化值（如深蓝按钮配 rgba(0,0,0,0.4)）。
