真正像素风按钮必须用整数坐标实时绘制，不能仅靠CSS缩放；HTML button因UA样式和亚像素渲染无法实现硬边像素格，需用CSS Grid模拟网格或canvas精确fillRect绘制。
直接给 加 image-rendering: pixelated 没用——浏览器不把它当位图渲染，缩放时照样模糊。像素风按钮不是“看起来像”，而是“由像素格子构成”，必须从底层结构上模拟离散坐标和硬边。
为什么 button 元素本身无法实现真正像素风
按钮是 HTML 表单控件，其内部渲染受 UA 样式和操作系统主题强干预；font-size、line-height、border、甚至 padding 都会引入亚像素计算和抗锯齿，导致边缘发虚、格点错位。哪怕你用 monospace 字体拼 “█” 符号，也会因字距、baseline 和字体 hinting 失控而失败。
常见错误现象包括：
- 放大后像素块拉伸变形，出现灰色过渡边
- 格子之间有不可控间隙（来自 inline-block 默认间距或 font 相关撑开）
- 悬停变色时触发重排，导致整个网格抖动
- 文字标签嵌在格子里，行高撑开容器，破坏 1:1 像素比例
用 CSS Grid 模拟像素网格（轻量、纯 CSS、无 JS）
适合静态按钮（如“START”“RESET”），要求严格控制尺寸与渲染一致性。
关键要点：
- 容器设
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;，彻底切断文本流干扰 - 交互改色用 JS 直接操作
element.style.backgroundColor，避免 class 切换引发重排 - 文字标签单独用绝对定位层叠在网格上方，不参与 grid 流
示例片段：
.pixel-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
width: 48px;
height: 48px;
font-size: 0;
line-height: 0;
}
.pixel {
width: 6px;
height: 6px;
margin: 0;
padding: 0;
border: none;
}
用 canvas 绘制像素按钮（精准、动态、推荐）
适合需要运行时绘制、颜色动画、扫描线叠加等进阶效果的场景。
核心原则：
- 只用
ctx.fillRect(x, y, size, size)，且x、y、size全部取整（|0或Math.floor） -
ctx.strokeRect或beginPath + rect + stroke会导致描边居中、半透明，必须禁用 -
canvas元素自身加 CSS：image-rendering: pixelated;（Chrome/Firefox/Safari 15.4+）；兼容旧版补image-rendering: -moz-crisp-edges;和-webkit-optimize-contrast; - 放大视图靠 CSS 的
width/height，别用ctx.scale()——它会污染后续所有绘图坐标 -
ctx.imageSmoothingEnabled = false对fillRect无效，别写
扫描线增强复古感：在 canvas 上层叠一层 真正让人识别为“复古”的，从来不是格子本身，而是那些轻微失真：CRT 扫描线的明暗节奏、像素偏移的错位感、色彩褪色的泛黄倾向。这些必须在渲染层动态叠加，不能靠一张 PNG 贴图应付。一旦你把像素按钮当成“图片”来处理，就已偏离本质——它是一组受整数坐标、硬边采样、零插值约束的实时绘制逻辑。，CSS 设 background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.08) 1px, rgba(0,0,0,0.08) 2px);容易被忽略的细节：像素风 ≠ 静态图，而是一种渲染约束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
