第 8 卷

1/DPR倍，此时1px CSS逻辑像素 = 1px 物理像素，直接设置 1px 边框就是真实的1px物理线条，无缩放、无模糊，是最精准的解决方案，适合纯移动端rem布局项目。

• 代码实现（JS+CSS）

Code block

1// 第一步：动态设置viewport，适配DPR 2(function() {

scale=${1/dpr}, minimum-scale=${1/dpr}, user-scalable=no`;

8document.head.appendChild(meta);

9})();

Code block

• 优势：物理级精准1px，无缩放副作用，代码极简
• 注意：需配合rem布局使用，否则页面元素尺寸错乱，仅适用于移动端，PC端不可用
• 方案3：box-shadow 阴影实现（✅ 极简方案，适合简单线条，无嵌套）
• 核心原理

利用 box-shadow 的扩散半径特性，设置 box-shadow: 0 0 0 1px #e5e5e5，扩散半径为 1px时，阴影的视觉粗细等同于真实1px边框，且阴影不占布局空间，无缩放、无偏移，代码一行搞

定，适合简单单边框/全边框场景。

• 代码实现

• 优势：代码极简，无需伪元素，支持圆角，无兼容性问题
• 注意：阴影颜色与背景色对比弱时，视觉上略有模糊，不影响使用
• 方案4：background-image 线性渐变实现（✅ 精准无缩放，适合特殊场景）
• 核心原理

通过 linear-gradient 线性渐变，创建1px高度/宽度的渐变背景，仅填充1px物理像素的区域，实现真实1px线条，适合需要渐变边框、半透明边框的特殊场景，无缩放、无偏移，精准控制。

• 代码实现（底部1px线条）

Code block

1.border-bottom-gradient { 2width: 100%;

3height: 1px;

• 方案5：使用border-image 图片实现（✅ 兼容旧版浏览器，适合复杂边框）
• 核心原理

制作1px宽的透明背景+1px颜色的图片（PNG格式），

（注：文档部分内容可能由 AI 生成）