为什么移动端1px边框使用SVG背景比CSS scale方案更清晰？-css教程-PHP中文网

SVG能避开物理像素“凑数”问题，因其是矢量图形，stroke-width:1由设备图形引擎直接映射到单个物理像素（DPR允许时），不经过CSS像素栅格化；而CSS scale缩放的是已渲染位图，易模糊发虚。

为什么移动端1px边框使用svg背景比css scale方案更清晰？

SVG背景为什么能避开物理像素“凑数”问题

因为SVG是矢量图形，stroke-width:1在渲染时由设备图形引擎直接映射到单个物理像素（只要DPR允许），不依赖CSS像素栅格化过程。而CSS transform: scale(0.5) 是对已生成的位图做缩放，浏览器仍会把原始1px边框先铺满2×2物理像素再压缩，导致边缘模糊或发虚。

SVG background-image 的关键配置项必须写全

用background-image: url("data:image/svg+xml,")时，以下三点漏一不可：

viewBox 属性必须存在，例如 viewBox="0 0 2 2"，否则 SVG 默认按 300×150 渲染，缩放后失真
不能写 width 或 height 固定值，否则会覆盖 background-size 控制逻辑
XML 特殊字符如 、>、" 必须 URL 编码，否则整个 background 消失且无报错

正确示例：background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M0 1h2' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E");

scale伪类方案在圆角/渐变/阴影场景下容易露馅

当你给一个带 border-radius: 4px 的元素用 ::before + transform: scaleY(0.5) 模拟1px底边时，缩放会扭曲圆角弧度，且无法继承父元素的 box-shadow 或 background: linear-gradient。SVG背景则完全独立，只控制线条本身，和容器样式零耦合。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

安卓低端机上 SVG 方案比 0.5px 更稳

很多 Android 低版本 WebView（如 Android 6–8 的系统 WebView）会把 border-width: 0.5px 当作无效值降级为 0px，但 SVG 的 stroke-width 在所有现代 WebView 中都按规范解析。不过要注意：部分老旧 UC 内核（已基本淘汰）不支持 Data URL 中的 SVG，生产环境建议加 fallback。

真正容易被忽略的是 SVG 的描边对齐方式——默认是居中对齐，若要让线条完全落在元素边界内侧，得加 shape-rendering: crispEdges 并手动调整 path 坐标，否则在某些 DPR=3 设备上仍可能有半像素偏移。