最准确还原nes像素风按钮需用伪元素绘制缺角边框、双层无模糊box-shadow模拟立体感，并严格按整数像素位移实现hover/active状态，禁用抗锯齿确保像素清晰。
直接用 nes-btn 类就能做出基础像素风按钮，但真要还原 NES 风格的立体感、缺角边框和状态反馈，光靠 class 不够——得补上伪元素、box-shadow 分层和精确的 transform 位移。
用 NES.css 快速起手但别全信默认样式
NES.css 的 nes-btn 确实开箱即用，但它的默认边框是完整矩形，没有经典 NES 按钮那种左上/右下缺角；:active 状态也只是简单变色，缺少“按下去”的物理位移感。实际项目中建议把它当骨架，再手动覆盖关键样式。
- 引入方式必须用完整 CSS 文件或按需编译 SCSS，只 link CDN 的 min 版本会丢掉部分变量和 hover/active 的精细控制
-
nes-btn.is-primary和nes-btn.is-success底色来自$nes-primary等变量，改色要动scss/base/variables.scss，不能只靠 inline style - 按钮文字默认用
font-family: 'Press Start 2P', cursive，但该字体未内置，必须额外加载 Google Fonts 或本地 font-face，否则回退到系统字体就失真
手动实现缺角边框和立体阴影
真正像素风按钮的“灵魂”在边框：不是一圈实线，而是四个独立角点 + 两段断开边线。用伪元素最稳妥，避免 DOM 增重。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给按钮加
position: relative，然后用::before和::after各画两个 2×2 像素块，分别定位在左上、右上、左下、右下（例如top: 0; left: 0;） - 中间断开的边线用另一个伪元素模拟：宽设为
calc(100% - 4px)，高 2px，top: 0放顶部，bottom: 0放底部，左右同理 - 立体感靠双层
box-shadow：一层浅灰偏移1px 1px模拟高光，一层深灰偏移2px 2px模拟阴影，禁用blur值（像素风不能模糊）
四种状态的位移和颜色必须严格对齐像素网格
Hover 和 Active 状态不是简单改 background-color，而是整体“挪动”。NES 风格里，按下时按钮内容向右下偏移 1px，同时高光区收缩 —— 这个偏移量必须是整数像素，小数会糊边。
-
:hover：只缩放高光区域（比如用background-position: 1px 1px配合渐变背景），不位移文字 -
:active：整个按钮transform: translate(1px, 1px)，同时把高光阴影反向调整（box-shadow: 0 0 #000, -1px -1px #fff） -
:focus：加 2px 虚线外框，颜色用#ffcc00（NES 黄），不能用默认蓝色 outline -
:disabled：禁用时不仅灰度化，还要加cursor: not-allowed和半透明遮罩层（::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }）
Canvas 渲染按钮仅适用于动态像素动画场景
纯 CSS 能 cover 95% 的像素按钮需求，Canvas 只在两种情况下值得上：需要逐帧动画（比如按钮被击中时碎裂）、或按钮尺寸随游戏逻辑实时变化（如血条式按钮宽度绑定 HP 值）。
- Canvas 绘制前先用
ctx.imageSmoothingEnabled = false关闭抗锯齿，否则像素边缘发虚 - 每个按钮状态存为独立 sprite sheet，用
drawImage()截取对应帧，不要 runtime 拼像素数组 —— 性能差且难维护 - Canvas 按钮无法原生响应
:hover或:focus，必须手动监听mousemove+getBoundingClientRect()做碰撞检测
最容易被忽略的是像素对齐：所有 transform、margin、padding 必须是整数，font-size 推荐用 8px、12px、16px 这类 4 的倍数，否则文字渲染会模糊——这点在高 DPI 屏幕上尤其致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
