表单控件在Retina屏发虚主因是DPR导致系统级渲染失准，非CSS边框问题；禁用appearance后应优先用border-image而非亚像素border-width；outline需用border+padding模拟并配合:focus-visible；字体模糊关键在字号未对齐物理像素，且height与line-height须严格一致。
表单控件在Retina屏上发虚，根本不是CSS边框问题
表单元素（input、select、textarea）在高DPR设备上边缘模糊，和你写的border: 1px solid #ccc关系不大。浏览器对原生控件的渲染完全绕过CSS边框逻辑——它直接调用系统级绘制API，而这些API在DPR > 1时会把1逻辑像素“摊开”到多个物理像素，结果就是灰边、毛刺、文字嵌入感弱。
禁用默认样式后，border-image比border-width更可靠
如果你用appearance: none剥离了系统样式，接下来别碰border-width: 0.5px——Safari和iOS WebKit对亚像素border的处理极不稳定，0.5px可能被抹成0，也可能被撑成1.2px，且无法预测。
-
border-image能绕过浏览器对border-width的物理换算：比如border-image: linear-gradient(to right, #999, #999) 1配合border-width: 1px，实际渲染由渐变采样控制，不依赖DPR映射 - 必须显式设置
border-style: solid，否则border-image在部分Chrome版本中失效 - 慎用
box-shadow模拟边框：它同样受DPR影响，在DPR=3设备上会自动变粗，且无法精确控制内/外阴影偏移
outline在表单聚焦时糊得更明显，要重写
原生outline是系统级焦点环，在Retina屏上常表现为半透明、发散、宽度不均的光晕。它不能用outline-width微调，也不能用border-image替代。
- 用
outline: none彻底禁用，再用box-shadow: 0 0 0 2px rgba(0,120,255,0.3)手动实现——但注意这个值在DPR=3时物理宽度会翻三倍，需JS动态注入 - 更稳妥的做法是改用
border+padding模拟焦点环，并配合:focus-visible确保键盘可访问性 - 别依赖
outline-offset：它在iOS Safari中对input[type="text"]基本无效，且offset值同样会被DPR放大
字体渲染模糊？检查font-smoothing和字号是否对齐像素
表单内文字发虚，往往不是抗锯齿开关的问题，而是字号与DPR乘积没对齐整数物理像素。例如14px字体在DPR=2设备上应占据28物理像素，但如果浏览器内部计算出现0.5像素偏差，就会触发次像素渲染，导致灰阶混色。
立即学习“前端免费学习笔记（深入）”；
- 强制启用清晰渲染：
-webkit-font-smoothing: antialiased（仅Safari）或font-smooth: always（旧Firefox），但效果有限 - 真正有效的是控制字号：用
rem或px固定值，避免em或%引发链式计算误差 - 关键细节：如果父容器用了
transform: scale()，子元素字体坐标会失准，所有文字都变糊——这种情况下必须重构布局，不用scale
height和line-height必须严格匹配，哪怕差1px，在高DPR下也会导致文字垂直居中偏移，进而触发浏览器重绘采样策略变化，让模糊从边缘蔓延到字形内部。 
