必须为::before/::after设content: “”、position: absolute，button设position: relative且z-index: 0，伪元素加z-index: 1和pointer-events: none；动画用transform（非width/height），延迟用transition-delay，移动端加-webkit-tap-highlight-color: transparent并避免过短时长。
button边框动画用::before和::after怎么写才不闪？
直接说结论：必须给::before和::after设content: ""、position: absolute，且父button要加position: relative。否则线条会错位或渲染异常。
常见错误是只写了伪元素样式但忘了content——css规范里没content的::before/::after根本不会渲染，动画自然没影子。
-
button必须有position: relative，否则absolute定位的伪元素会相对于body偏移 - 两个伪元素建议都设
pointer-events: none，避免遮挡点击 - 过渡要用
transform（比如scaleX/scaleY），别用width/height——后者会触发重排，卡顿明显
四边分别入场的线条动画怎么控制顺序？
核心是用transition-delay配合transform的初始状态。每条边的伪元素单独控制，不能靠一个transition统配。
典型场景：鼠标悬停时，上边线从左到右、右边线从上到下、下边线从右到左、左边线从下到上，依次出现。这需要四个伪元素（或两个伪元素+旋转技巧），每个设不同delay和transform-origin。
立即学习“前端免费学习笔记（深入）”；
- 上线：
transform: scaleX(0)→transform: scaleX(1)，transform-origin: left center - 右边线：用
transform: scaleY(0)→scaleY(1)，transform-origin: center top - 延迟值建议差
0.1s起步，太小人眼难分辨，太大又拖沓 - 注意：
transform动画在scaleX(0)时仍占渲染空间，若想完全“隐形”，得配合opacity: 0起手
按钮带文字时，伪元素线条被遮挡怎么办？
不是z-index数字调高就行——button内部文本默认在伪元素之上，因为伪元素生成在元素内容层之下（除非显式提升）。
真实问题常出现在用了font-smoothing或text-rendering优化的项目里，线条边缘发虚、被文字半透明像素吃掉。
- 给
::before/::after加z-index: 1，同时给button设position: relative并加z-index: 0（创建新层叠上下文） - 线条颜色别用纯黑/纯白，改用
rgba(0,0,0,0.95)这类略带透明的值，能减少与文字抗锯齿的冲突 - 如果按钮有
background-clip: padding-box之类设置，检查是否意外裁掉了伪元素区域
移动端点击区域变小或动画失灵？
伪元素默认不响应:hover，移动端靠:active触发，但很多安卓浏览器对::before/::after的:active支持不稳定。
更麻烦的是：ios safari 在快速连续点击时，transform动画可能被跳过一帧，看起来像“没动”。这不是代码错，是渲染管线节流。
- 必须为
button加-webkit-tap-highlight-color: transparent，否则点击高亮会盖住线条 - 动画时间别低于
0.2s，iOS对超短过渡有丢帧倾向 - 真要保点击反馈，建议监听
touchstart/touchend用js补一层class切换，而不是纯CSS依赖:active
最易被忽略的是：伪元素线条的border宽度在Retina屏上可能被缩放为非整数像素，导致边缘模糊。固定用1px solid不如用thin solid或0.5px（部分浏览器支持），或者干脆用box-shadow模拟单像素线更稳。