像素风按钮必须用canvas绘制或css grid模拟像素格子，禁用插值渲染；核心是整数坐标、硬边、离散格点，避免字体拼图与亚像素渲染。

button 元素本身不支持 pixelated 渲染，必须用 canvas 或 div 模拟

直接给 <button></button> 加 image-rendering: pixelated 无效——浏览器不把按钮内容当位图处理，缩放时仍会插值模糊。像素风按钮的本质是「离散格点 + 硬边 + 整数坐标」，不是靠字体或边框圆角凑出来的。

可行路径只有两条：

• 用 <canvas></canvas> 绘制像素块作为按钮视觉层，再覆盖透明 <button></button> 处理点击（推荐，可控性强）
• 用 CSS Grid 排布 <div class="pixel"> 模拟像素网格，每个格子设固定 <code>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></span> 层叠在像素网格上方，不要混进格子流里。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载

  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 元素的 CSS width/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

  最容易被忽略的是：所有像素单位（宽高、位移、渐变间隔）必须严格为整数，任何小数都会触发亚像素渲染，瞬间破坏像素感。