box-shadow双层配色必须匹配背景明度，外阴影比背景暗10–15、内阴影亮10–15，否则浮雕感失效；浅色模式用#f5f5f5背景配#e5e5e5外阴影和#ffffff内阴影，深色模式需整套重写，禁用border，统一padding与12px圆角，必实现:focus-visible焦点样式。
box-shadow双层配色必须匹配背景明度
浮雕感失效，90%是因为box-shadow颜色和背景色明度差不对。不是“加两层阴影就行”，而是外阴影要比背景色暗10–15个明度值，内阴影要比背景色亮10–15个值。
常见错误：box-shadow: 2px 2px 4px #e0e0e0, -2px -2px 4px #ffffff用在深色背景上直接消失；或者背景是#f0f0f0，却写死background: #ffffff，导致内外阴影对比塌缩。
- 浅色模式下，父容器和按钮
background统一设为#f5f5f5 - 外阴影（模拟下压）用
#e5e5e5，内阴影（模拟高光）用#ffffff - 深色模式必须整套重写：背景
#1e1e1e→ 外阴影#2a2a2a、内阴影#121212，不能靠filter: invert() - 禁用
border——它会切割光影过渡，破坏浮雕的“无缝嵌入”感
button尺寸与圆角必须协同控制
浮雕按钮对物理尺寸敏感：太小看不出层次，太大阴影发虚。关键不是“好看”，是让用户一眼感知到可点击的立体反馈。
推荐组合：padding: 12px 24px + border-radius: 12px。圆角小于8px，边缘生硬；大于20px，阴影过渡断层。
立即学习“前端免费学习笔记（深入）”；
- 避免用
height/width硬设尺寸——文字缩放或字体替换时易错位 -
display: inline-flex比默认inline-block更稳，尤其在父容器有font-size: 0或display: flex时 - 移动端用
rem单位控制padding和border-radius，但box-shadow的像素值保持固定（如2px），否则高DPI屏上会糊
:focus-visible必须显式实现
键盘用户按Tab聚焦时，浮雕按钮若没焦点样式，等于不可访问。很多项目只做:hover，漏掉:focus-visible，结果WCAG 2.1直接不达标。
别用outline: none一删了之——那只是隐藏问题，不是解决问题。
- 焦点样式必须和悬停样式一致：同样
transform: translateY(-2px)+ 同样双层box-shadow - 用
outline: 2px solid transparent+outline-offset: 4px模拟“光晕边框”，比纯阴影更易识别 - 确保
button元素本身没被pointer-events: none或inert误关掉 - 如果用了CSS-in-JS框架，检查是否因样式隔离导致
:focus-visible未注入到真实DOM节点
移动端fixed悬浮按钮的safe-area陷阱
把浮雕按钮做成position: fixed右下角悬浮，iOS上常被键盘顶走或卡在错误位置——问题不在CSS，而在没适配env(safe-area-inset-bottom)和滚动视口变化。
单纯写bottom: 20px等于放弃iPhone用户。
- 定位必须写成
bottom: calc(20px + env(safe-area-inset-bottom)) - 加
touch-action: manipulation，否则iOS Safari有300ms点击延迟 - 点击热区至少
48px × 48px，用padding撑开，别靠font-size或图标大小凑 - 避免在按钮父级容器上设
transform或filter——这会创建新层叠上下文，让fixed退化为absolute
box-shadow，而是明度值要随主题实时同步、焦点状态要和悬停完全一致、移动端安全区要手动补偿——三者缺一，用户要么看不见，要么点不中，要么键盘无法操作。 
