因8-bit硬件色域受限于固定调色板（如NES 54色、GB四阶灰度），#FF00FF等现代RGB色在原始设备上不存在，需用CSS模拟调色板约束+像素网格遮罩+禁用抗锯齿实现真实复古效果。
为什么直接用 #FF00FF 无法还原真正的 8-bit 像素色？
因为真 8-bit 显示器（如 NES、Game Boy）的色域受限于硬件调色板，不是全 RGB。比如 Game Boy 的四阶灰度、NES 的 54 色固定调色板，rgba(255, 0, 255, 1) 这种纯品红在原始硬件上根本不存在——它会被映射成近似的棕/紫/灰。想“复古”，得先放弃现代显示器的色彩自由，主动限制输出范围。
关键不是“加滤镜”，而是“降维”：用 CSS 模拟调色板约束 + 像素网格遮罩，让浏览器强制走一条窄色道。
用 background-image 叠加 repeating-linear-gradient 做像素网格遮罩
纯 CSS 实现像素感的核心是遮罩层：在内容上方盖一层半透明的网格线，模拟 CRT 屏幕的扫描线+像素间隙。不能靠 border 或 box-shadow 模拟，它们抗锯齿后发虚；必须用硬边渐变生成 1px 网格。
- 横向线：
repeating-linear-gradient(to bottom, transparent 0, transparent 7px, rgba(0,0,0,0.15) 7px, rgba(0,0,0,0.15) 8px) - 纵向线：
repeating-linear-gradient(to right, transparent 0, transparent 7px, rgba(0,0,0,0.15) 7px, rgba(0,0,0,0.15) 8px) - 合并为两层：
background-image: linear-gradient(rgba(0,0,0,0.15) 0, transparent 0), linear-gradient(90deg, rgba(0,0,0,0.15) 0, transparent 0); background-size: 8px 8px; - 注意：
background-size必须和渐变中“实线高度”严格对齐（这里是 8px），否则网格错位
用 @property + color-mix() 限制颜色输出到 NES 调色板区间
CSS 新特性可以动态约束颜色值。虽然不能直接载入 .pal 文件，但能用 color-mix() 把输入色“拉回”近似 NES 色域（例如把任意红色映射到 #762a2a、#c25252 等有限选项）。
需配合 @property 定义自定义属性并设 syntax: "<color>"</color>，再在使用处写：
color: color-mix(in srgb, var(--input-color) 70%, #762a2a 30%);
实际项目中建议预设几组变量：
-
--nes-red: #762a2a;（NES 暗红） -
--nes-blue: #2a4a76;（NES 深蓝） -
--nes-green: #2a764a;（NES 青绿） - 所有元素的
color/background-color只从这三色及其rgba(..., 0.8)变体中取值
字体与缩放必须关闭亚像素渲染，否则像素感崩塌
哪怕颜色和网格都对了，Chrome/Firefox 默认开启的 subpixel antialiasing 会让文字边缘发虚，彻底破坏像素风。必须显式禁用：
-
font-smoothing: none;（WebKit） -webkit-font-smoothing: none;-
-moz-osx-font-smoothing: grayscale;（Firefox on macOS，设为 grayscale 是最接近硬边的效果） - 字体必须用等宽位图字体（如
Press Start 2P），且font-size设为 8px / 16px / 24px 整数倍，禁止用 rem 或 % 缩放 - 容器加
image-rendering: pixelated;，防止高 DPI 下自动插值模糊
最容易被忽略的是：网格遮罩的 background-size 和字体 font-size 必须同单位同倍数，比如都是 8px 基准——差 1px 就会错位，看起来像“没对齐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
