复古像素风按钮需用多层box-shadow或伪元素模拟锯齿边缘，禁用outline；设font-size:12px、text-shadow粗边、letter-spacing:1px防粘连；宽高比取4:1，padding:6px 12px，vertical-align:middle；hover/active通过明暗色阶与inset阴影实现凹陷感；响应式用clamp+rem维持比例；canvas中按钮需absolute+高z-index确保层级。
怎么用 CSS 实现复古游戏按钮的“像素风”边缘
直接用 border 拉不出那种锯齿感，得靠多层 box-shadow 或伪元素叠加模拟像素块。主流做法是：主按钮设 font-size: 12px，再用 text-shadow 模拟粗边，同时配合 letter-spacing: 1px 避免文字粘连。
- 别用
outline做外框——它不支持偏移方向控制，锯齿会糊成一团 - 如果用
box-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000，必须确保按钮背景色和阴影色对比足够强，否则在暗色背景下消失 - 真正“复古”的关键不是颜色，而是比例：按钮宽高比建议 4:1 或 5:2（比如
width: 160px; height: 32px），字体大小固定为12px或14px，禁用line-height自动调整
hover 和 active 状态为什么按下去没“凹陷感”
纯 transform: scale() 只缩放，不改变视觉深度。复古按钮需要明确的明暗变化来模拟物理按键——顶部加亮、底部加深才是核心。
- 正确写法：
button:hover { background-color: #8b4513; }+button:active { background-color: #5d2906; box-shadow: inset 0 -2px 0 #3a1a04; } - 别依赖
transition: all——它会过渡box-shadow导致边缘发虚，只写transition: background-color 0.08s, box-shadow 0.08s - iOS Safari 下
:active不触发？必须加touch-action: manipulation到按钮上，否则触摸时无反馈
为什么按钮文字总被裁切或错位
复古字体（如 Press Start 2P）默认行高和字距与系统字体差异极大，padding 值不能照搬现代 UI 的经验。
- 实测安全值：
padding: 6px 12px（上下 6px，左右 12px），再多就会撑破像素对齐 - 必须显式设
vertical-align: middle，否则文字在 flex 容器里常偏下 1px - 用
@font-face加载字体后，立即检查font-display: swap是否开启——否则首次渲染会 fallback 到系统字体，导致尺寸突变
如何让按钮在不同屏幕下保持“复古比例”不拉伸
响应式不是简单加 width: 100%，复古风格依赖绝对像素单位维持视觉节奏。关键是在小屏上缩小整体比例，而非拉伸单个按钮。
- 推荐方案：根元素设
font-size: clamp(12px, 4vw, 14px)，所有按钮尺寸用rem单位（如width: 12rem; height: 2.5rem） - 禁用
max-width: 100%—— 它会让按钮在窄屏下强行填满，破坏比例；改用width: fit-content+margin: 0 auto - Canvas 游戏界面中叠加按钮时，务必给按钮容器加
position: absolute+z-index: 10，否则会被 canvas 的z-index覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
