真正立体凸起需多层box-shadow逐级偏移加深：外层大偏移高模糊模拟环境影，中层中偏移中模糊表现受光过渡，内层小偏移零模糊紧贴下沿模拟硬质挤压；:active时同步transform: translatey(2px)与box-shadow垂直偏移增大、模糊加宽，transition仅锁定二者以保障反馈精准。
box-shadow 多层叠加模拟真实凸起
单层 box-shadow 只能拉出一层模糊边缘，看不出“从背景里挤出来”的体积感。真正有立体感的按钮，得靠多层阴影逐级偏移、逐级加深，像真实物体投下的多重投影一样。
- 最外层用大偏移+高模糊（如
0 12px 16px rgba(0,0,0,0.2)）模拟远距离环境阴影 - 中间层用中等偏移+中等模糊（如
0 6px 8px rgba(0,0,0,0.3)）表现主体受光面过渡 - 最内层用小偏移+零或极小模糊（如
0 2px 0 #333）紧贴按钮下沿，模拟硬质挤压边缘 - 所有层必须用逗号分隔写在同一行
box-shadow值里，顺序不能颠倒——浏览器按书写顺序渲染，后写的会盖住前写的
:active 状态下 box-shadow 与 transform 必须反向同步
用户点击时如果只改背景色或加 opacity，根本感知不到“按下”。真正的按压反馈是：按钮下沉 + 底部阴影变厚变柔 + 顶部高光减弱。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
transform: translateY(2px)让按钮视觉下陷 -
box-shadow的垂直偏移值要增大（比如从0 4px改为0 6px），模糊半径也要加大（如从4px到8px） - 过渡动画必须写在默认状态，且只锁定这两个属性：
transition: transform 0.1s, box-shadow 0.1s；写all容易拖慢文字颜色或边框变化 - 别漏掉重置
outline或border，某些浏览器在:active下会自动加轮廓线，直接破坏立体结构
深色背景上 box-shadow 颜色不能用纯黑
在 #121212 这类深灰背景上，rgba(0,0,0,0.5) 的阴影会像刀刻一样割裂画面，不是“投影”，是“裂痕”。
- 推荐用
#333、#444或带一点暖灰倾向的rgb(50, 50, 60)替代纯黑 - 透明度别超过
0.4，否则阴影边界发虚，失去支撑感 - 如果按钮本身是浅色（如
#f5f5f5），可适当提高阴影对比度，但依然避免rgba(0,0,0,0.6)以上
移动端点击热区被 border-bottom 吞掉怎么办
很多教程教用 border-bottom 配合 box-shadow 做立体，但在手机上，过粗的 border-bottom（比如 5px）和过高模糊值（比如 blur > 10px）会让手指实际触控区域变小，点不准。
- 移动端优先用
box-shadow构建立体，放弃border-bottom模拟受压面 -
box-shadow的blur控制在3px–6px，确保阴影边界清晰可识别 - 按钮尺寸靠
padding和line-height自适应，别设固定width/height，否则小屏上文字撑出或缩进都会破坏阴影对齐 - 测试时真机点按，别只看 Chrome DevTools 模拟器——触摸反馈延迟和热区偏移在模拟器里常被掩盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
