伪元素按钮缺乏立体感主因是阴影方向、偏移量与层级顺序不匹配人眼直觉；需用::before模拟下陷底面（深色+向下偏移+右下阴影），::after做高光（浅色+左上偏移+z-index低于主元素），主元素设position: relative，偏移值控制在2–4px更真实。
伪元素按钮没立体感？阴影和偏移值配错是主因
CSS伪元素（::before 和 ::after）本身不占文档流，但想用它们模拟按钮的「按下去」深度感，关键不在加多少层阴影，而在阴影方向、偏移量和层级顺序是否匹配人眼对物理按压的直觉。
常见错误是只加 box-shadow 却忽略 transform: translateY() 的配合，或者把 ::before 放在顶层却让它“浮起来”，结果看起来像悬空，不是下陷。
-
::before通常用来画「压下去的底面」：设为深色、带向下偏移（如transform: translateY(2px)）、阴影向右下（box-shadow: 2px 2px 4px rgba(0,0,0,0.2)） -
::after若用于高光，得用浅色 + 向左上偏移（transform: translate(-1px, -1px)），且z-index必须低于主元素，否则会盖住文字 - 主按钮元素本身要设
position: relative，否则伪元素的absolute定位会脱出预期范围 - 别用大数值偏移（如
translateY(10px)）——真实按钮按压形变远没那么夸张，2–4px 更可信
移动端点击反馈失效？伪元素遮挡触摸区域
伪元素默认不响应点击，但如果给 ::before 或 ::after 加了背景、边框或设置了 content: ""，又没控制好尺寸和 pointer-events，就可能意外覆盖主按钮的可点区域，尤其在小屏上。
典型现象是：视觉上有按钮，但点不动；或只有边缘能点中。这不是 JS 事件没绑，而是 CSS 层级吃掉了触摸事件。
立即学习“前端免费学习笔记（深入）”；
- 检查伪元素的
width/height是否超出主元素边界（比如用了left: -5px却没限制overflow） - 确保伪元素没有
pointer-events: auto（这是默认值，但若父级设了pointer-events: none，子伪元素也不会响应） - 更稳妥的做法：把交互逻辑全放在主元素上，伪元素只负责视觉，用
:active触发偏移和阴影变化，而非依赖伪元素自身状态 - 真要让伪元素参与反馈，显式加
pointer-events: none，避免干扰
阴影模糊度影响性能？低配设备卡顿有迹可循
box-shadow 的模糊半径（第二个参数）越大，浏览器重绘开销越高，尤其在伪元素上叠加多层阴影时。iOS Safari 和旧版 Android WebView 对此特别敏感，轻微卡顿往往就来自 box-shadow: 0 4px 12px rgba(...) 这类写法。
这不是“不能用”，而是模糊值要克制——人眼对深度的感知主要靠偏移和颜色对比，不是靠模糊。
- 优先用
box-shadow: 1px 1px 2px rgba(0,0,0,0.15)这类小值组合，比0 0 10px rgba(...)更高效也更真实 - 避免在伪元素上同时用
filter: blur()和box-shadow，两者叠加会触发额外合成层 - 动画中慎用
box-shadow变化：它无法 GPU 加速，改用transform+ 单色阴影模拟更稳 - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，能直观看到哪些伪元素在频繁重绘
IE11 兼容性断层？伪元素深度效果直接降级
IE11 支持 ::before/::after，但对 transform 的子属性（如 translateY）支持不完整，且不支持 rgba() 在 box-shadow 中的透明度。这意味着你写的深度效果在 IE11 里要么错位，要么变成纯黑硬边，毫无柔和感。
这不是要不要兼容的问题，而是降级策略必须明确：是彻底关闭伪元素效果，还是保留基础阴影+颜色？
- 用
@supports (transform: translateY(0)) and (box-shadow: 0 0 0 rgba(0,0,0,0))包裹深度样式，让老浏览器跳过整段 - IE11 下 fallback 方案建议用单层
box-shadow: 1px 1px 0 #aaa（无透明度、无模糊），配合主元素border做简单立体暗示 - 别试图用
-ms-transform修复偏移——IE11 的transform对伪元素定位支持不稳定，容易导致位置漂移 - 如果项目已放弃 IE，就在构建流程里删掉相关前缀和检测，减少冗余
真正难的不是写出有深度的按钮，而是让那个「按下去」的瞬间，在不同设备、不同渲染引擎、不同用户交互节奏下，都保持一致的可信感。偏移几像素、阴影透明度差 0.05、甚至伪元素的 z-index 差一层，都会让这个感觉垮掉。
