button必须设position: relative才能使::before/::after伪元素相对于自身定位，否则会飘至页面左上角；content属性不可省略，箭头需用width:0;height:0和四边border实现；凹陷反馈应通过::after遮罩层配合overflow:hidden实现；复杂动效需改用div+role="button"。
button 必须设 position: relative 才能用 ::before/::after 定位
伪元素默认相对于最近的定位祖先（比如 body）渲染，不是 button 自身。不加 position: relative，::before 和 ::after 会飘到页面左上角，箭头、遮罩、流星全失效。
常见错误是只写 content: "" 却漏掉这行 CSS。哪怕按钮本身没其他定位需求，也得显式声明。
-
content属性不可省略，哪怕只是content: "" - 伪元素默认是 inline，要控制宽高必须加
display: block或inline-block - 移动端若用
transform: scale()做动效，建议加will-change: transform防模糊
画箭头必须 width: 0; height: 0; + 四边 border
箭头本质是三边透明、一边实色的三角形，靠 border 交汇形成。只要 width 或 height 不为 0，就不是标准箭头——会变梯形、偏斜，甚至消失。
向右箭头典型写法：border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 0;
- 定位推荐用
right: -10px; top: 50%; transform: translateY(-50%)，比硬算 margin 稳定 - 安卓 WebView 对缺失的 border 声明更敏感，
border-top、border-bottom即使透明也得写全 - 箭头本身无物理尺寸，触摸热区极窄，需额外加
padding或pointer-events: none配合父容器扩大点击区域
模拟凹陷反馈别改背景，用 ::after 遮罩层
单纯改 background-color 或 box-shadow 缺乏物理感。真正有效的按下反馈是叠加一层半透明遮罩，随按压动态放大并加深。
关键点在于让遮罩继承按钮的圆角和尺寸，否则会裁切文字或破坏视觉一致性。
-
button要加overflow: hidden，防止遮罩溢出圆角边界 -
button::after初始设opacity: 0; transform: scale(0.8); background: rgba(0,0,0,0.15) -
button:active::after改为opacity: 0.3; transform: scale(1)，配合transition: all 0.12s ease - 避免过渡
width/height，触发重排；只用transform和opacity
发光/流星效果不能直接套在原生 button 上
原生 <button></button> 在多数浏览器中禁用 ::before/::after，尤其当有 appearance: button 时，伪元素根本不会渲染。这不是 bug，是规范限制。
想做发光、流星、锥形边框这类复杂效果，必须换非替换元素。
- 改用
<div role="button" tabindex="0">，并手动监听 <code>Enter/Space键 - 发光分层：主体 +
::before（内光晕，负偏移+filter: blur()）+::after（外散射，更大模糊半径） - 流星动画每次只播一次，用 JS 控制 class 切换，并在
animationend中移除 class，否则连续点击会堆叠动画、卡顿 - 锥形边框无法用
border-image实现，得用::before绘制conic-gradient背景，再用clip-path或inset裁出环状
伪元素不是装饰补丁，而是视觉反馈的底层载体。它不参与 DOM 结构，但直接影响交互可信度——用户点下去那一刻，看到的不是颜色变深，而是“被压下去”的遮罩、划过的光轨、撑开的边框。这些细节一旦错位或失效，反馈就断了。
