真正复古的CRT效果需叠加扫描线与亚像素抖动：用repeating-linear-gradient生成2px间距、rgba(0,0,0,0.08)透明度的黑色条纹层，并配以transform: translateX(0.5px) translateY(-0.3px)和steps(1)动画，辅以backface-visibility: hidden防闪烁。
用 CSS 模拟 CRT 显示器扫描线和抖动效果
如果只是给纯色背景配上 font-family: "Courier New", monospace，那顶多算个“风格尝试”，离真正的复古感还差得远。什么才是让人一眼就认出“老电脑味”的灵魂？答案是动态的视觉干扰。其核心在于两层效果的叠加：一层是半透明的黑色条纹，用来模拟CRT的扫描线；另一层则是轻微的、不稳定的位移动画，模仿电子束那种特有的颤动感。
具体怎么实现？这里有几个经过验证的实操建议：
- 扫描线生成：直接用
repeating-linear-gradient来创建重复的线性渐变条纹。间隔建议设为2px，透明度控制在rgba(0,0,0,0.08)左右。这个度很关键——太深了屏幕会显得发灰、脏兮兮的；太浅了又几乎看不见，失去了存在感。 - 抖动动画：千万别用简单的
transform: translate()做大幅位移。人眼对水平晃动极其敏感，过犹不及。正确的做法是使用transform: translateX(0.5px) translateY(-0.3px)这类亚像素级别的细微偏移，并且一定要配合animation-timing-function: steps(1)，这样才能避免平滑过渡，还原那种生硬的、像素级的跳动感。 - 防闪烁处理：最后，务必加上
backface-visibility: hidden这个属性。否则在Safari浏览器下，扫描线图层很可能会出现恼人的闪烁问题，瞬间破坏沉浸感。
字体与字号必须匹配年代硬件限制
很多人以为，复古网页就是“选个等宽字体完事”。这其实是个误区。上世纪90年代的网页设计，是深深受限于当时硬件条件的。那时主流显示分辨率不过 640×480 或 800×600，系统字体也因平台而异：Windows 3.1的默认是 MS Sans Serif，而Macintosh上则是 Chicago。直接套用现代清晰的 Courier New，效果反而会显得太“干净”，失去了那种粗糙的时代感。
要精准还原，得这么操作：
- 字体选择：如果想打造Windows风格，就用
font-family: "MS Sans Serif", "Tahoma", sans-serif；如果是Mac风格，则用font-family: "Chicago", "Geneva", sans-serif。别忘了设置好备用字体链。 - 字号锁定：字号请统一使用
12px或13px，坚决禁用rem或视口单位。道理很简单：那个年代根本没有响应式设计的概念，固定像素尺寸才是历史的真实。 - 关闭抗锯齿：通过
-webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;来关闭字体的平滑效果。需要注意的是，这个属性主要对WebKit/Blink内核的浏览器有效，Firefox并没有完全对应的开关。
链接下划线和点击反馈要还原“超文本原始感”
现代网页设计里，给链接的 a:hover 状态加个淡入的背景色，就算完成了交互。但在Netscape Na vigator 2.0的时代，交互是生硬而直接的：链接是纯正的蓝色 #0000ff，必定带着 text-decoration: underline；点击的瞬间，整行文字会短暂变成黑色——没有过渡动画，没有阴影效果，就是一种干脆利落的视觉切换。
想复刻这种原始感，得遵循以下规则：
- 色彩规范：链接颜色严格使用
color: #0000ff。访问过后的链接，则用a:visited { color: #800080; }来定义，这是早期Mosaic和Netscape浏览器默认的紫色。 - 取消过渡：取消所有关于
color和text-decoration的transition效果。复古网页的交互没有“柔和”一说。 - 点击反馈：高亮效果全靠
a:active状态来实现：color: #000000; background-color: #c0c0c0;。记住，那个年代没有半透明背景，灰色的块状背景就是“高亮”的唯一表现形式。
图片加载失败时的 alt 文本要当内容用
在早期网速缓慢的条件下，alt 属性文本绝非现代意义上的“无障碍辅助补丁”，而是页面信息的主要载体之一。用户非常依赖这些文本来理解页面内容，甚至有些老网站会故意不设置 src，只靠 alt 文本来描述内容。
用好 alt 属性，是复古设计的重要一环：
- 必有且精简：每个
alt属性。文本长度最好控制在15个字以内，这是参考了1995年Lynx等纯文本浏览器的典型显示宽度。 - 直接描述：避免使用“图片：XXX”这样的前缀，直接进行描述，例如：“拨号音图标”、“Windows 95 开机画面”。
- 装饰性图片：如果图片纯粹是装饰性的，应使用
alt=""（空字符串），但切记不能省略整个属性。因为在某些古老的屏幕阅读器上，省略alt会被读作“image”，反而造成干扰。
最后提一个最容易被忽略的细节：色彩空间。sRGB和Rec.709在当年的CRT显示器上差异不大，但现代显示器默认开启了更广的色域，这会导致一些复古色值（比如那种标志性的 #00ff00 绿）显得过于鲜艳、饱和。如果追求极致的还原，就不能只依赖设计稿上的“看起来差不多”，而需要在CSS中加入 color-scheme: light dark; 并进行手动的十六进制色值校准。
