像素风按钮必须用canvas绘制或CSS Grid模拟像素格子，禁用插值渲染；核心是整数坐标、硬边、离散格点，避免字体拼图与亚像素渲染。
button 元素本身不支持 pixelated 渲染，必须用 canvas 或 div 模拟
直接给 <button> 加 image-rendering: pixelated 无效——浏览器不把按钮内容当位图处理，缩放时仍会插值模糊。像素风按钮的本质是「离散格点 + 硬边 + 整数坐标」，不是靠字体或边框圆角凑出来的。
可行路径只有两条：
- 用
<canvas>绘制像素块作为按钮视觉层，再覆盖透明<button>处理点击（推荐，可控性强） - 用 CSS Grid 排布
<div class="pixel">模拟像素网格，每个格子设固定width/height，禁用所有盒模型干扰
别试图用 font-size: 8px + monospace 拼字符画按钮——行高、字距、抗锯齿全不可控，边缘必然发虚。
用 div 模拟像素格子时，必须锁死盒模型和排版
常见错误是格子错位、间隙不均、放大后变形，根源在默认的 inline-block 间距或 font 相关撑开。
立即学习“前端免费学习笔记（深入）”；
- 容器加
display: grid和grid-template-columns: repeat(8, 1fr)（假设 8×8 像素按钮） - 每个像素格子设
width: 6px; height: 6px;，且margin: 0; padding: 0; border: none; - 容器级加
font-size: 0; line-height: 0;，彻底消除文本相关干扰 - 交互改色用
element.style.backgroundColor = "#ff0"，避免 class 切换触发重排
如果按钮需要文字标签（如“START”），单独用一个绝对定位的 <span> 层叠在像素网格上方，不要混进格子流里。
canvas 实现像素按钮时，fillRect 是唯一可靠绘制方式
有人用 strokeRect 或 beginPath + rect + stroke 画像素边框，结果边缘模糊、粗细不一——因为 stroke 是居中描边，在亚像素坐标上渲染必然半透明。
- 只用
ctx.fillRect(x, y, size, size)，且x、y、size全部取整（|0或Math.floor） -
canvas元素自身加 CSS：image-rendering: pixelated;（Chrome/Firefox/Safari 15.4+ 支持） - 兼容旧版可叠加：
image-rendering: -moz-crisp-edges;和-webkit-optimize-contrast; - 别用
ctx.scale()缩放画布——它影响所有后续绘图坐标；如需放大视图，应放大 canvas 元素的 CSSwidth/height
注意：ctx.imageSmoothingEnabled = false 只对 drawImage 生效，对 fillRect 无影响，也不影响 canvas 被 CSS 缩放时的渲染质量。
复古感来自细节叠加，不是单一样式
纯像素网格只是基础，真正让人识别为“复古”的是 CRT 扫描线、轻微抖动、褪色偏移这些动态干扰。
- 扫描线层：用
repeating-linear-gradient叠加 rgba(0,0,0,0.08) 黑条纹，间隔 2px - 抖动动画：用
@keyframes配合transform: translateX(0.5px) translateY(-0.3px)和steps(1)定时函数 - 务必加
backface-visibility: hidden，否则 Safari 下扫描线层易闪烁 - 按钮文字若用等宽字体，选
"Courier New", monospace，但字号必须为整数 px，禁用 rem/em
最容易被忽略的是：所有像素单位（宽高、位移、渐变间隔）必须严格为整数，任何小数都会触发亚像素渲染，瞬间破坏像素感。
