iphone上border发虚是因css像素被映射到2~3物理像素导致亚像素渲染失控；0.5px无效；伪元素+scale()方案需满足position:relative、pointer-events:none、transform-origin匹配方向及动态适配dpr；svg变糊主因是width/height属性触发光栅化，应删之并用viewbox+css控制尺寸。
为什么 border: 1px 在 iPhone 上看起来发虚
不是 CSS 写错了，是浏览器把 1 个 CSS 像素映射到了 2 或 3 个物理像素，再用插值混合填充——结果就是灰边、半透明、边缘漂移。你看到的“模糊”，本质是亚像素渲染失控。border: 0.5px 大概率无效：安卓多数不支持，iOS 会四舍五入成 1px，Chrome/Firefox 直接丢弃该值。
用伪元素 + transform: scale() 实现真正 1 物理像素边框
这是目前最稳定、可维护性最强的方案，但必须同时满足三个条件，缺一不可：
- 父容器设
position: relative - 伪元素加
pointer-events: none，否则点击穿透失效 -
transform-origin必须匹配绘制方向：全边框用left top，只画下边框则必须用left bottom，否则线会偏移半像素
关键还要动态适配不同 dpr：document.documentElement.setAttribute('data-dpr', Math.round(window.devicePixelRatio) || 1)，再写 CSS：
[data-dpr="2"] .hairline::after { transform: scale(0.5); }
[data-dpr="3"] .hairline::after { transform: scale(0.333333); }
SVG 图标变糊，90% 是因为写了 width 和 height 属性
浏览器对 <img src="icon.svg"> 的处理逻辑和 PNG 一样：先光栅化成位图，再缩放。只要 SVG 标签里存在 width="24" 或 style="max-width:90%"（哪怕带单位或百分比），就会触发这一步，矢量优势彻底丢失。
- 删掉 SVG 源码中所有
width=、height=属性 - 确保第一行有
viewBox="0 0 24 24"，且数值匹配原始设计稿 - 用 CSS 控制尺寸：
svg { width: 24px; height: 24px; }，禁用background-size: cover/contain - 如果用 Data URL 作背景，XML 中的
、<code>>、"必须 URL 编码，否则解析失败、背景空白
image-rendering 不是万能解，但能补救已加载的图
它只控制浏览器如何渲染**已经选中的图片**，不参与资源选择。如果 Network 面板里看到加载的是 icon@1x.png，那再设 image-rendering: crisp-edges 也只是把一张被拉伸的图“锐化显示”，不是变高清。
- Safari 推荐用
-webkit-optimize-contrast，Chrome/Firefox 用crisp-edgesfallback - 全局重置样式或 Tailwind 可能悄悄注入
image-rendering: smooth，必须显式覆盖 - 对 SVG 或字体图标无效——它们不走位图插值路径
transform-origin 的取值必须随绘制方向动态调整，不是固定写死；SVG 的 viewBox 值一旦和设计稿不一致，再怎么调 CSS 尺寸都救不回比例失真。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
