第 6 卷

2.line-05 { 3width: 100%;

4height: 1px; /* 先设置1px高度 */

• 垂直0.5px线

Code block

1/* 垂直0.5px线 */ 2.line-v-05 {

3height: 100%;

4width: 1px; /* 先设置1px宽度 */ 5background-color: #333;

• 元素边框0.5px（实战常用，如卡片0.5px边框）

Code block

1.box { 2position: relative;

3width: 200px;

4height: 100px;

5border: none; /* 隐藏默认边框 */ 6}

7/* 伪元素实现0.5px边框 */ 8.box::after {

9content: "";

10position: absolute;

11top: 0;

12left: 0;

13width: 200%; /* 放大2倍 */ 14height: 200%;

15border: 1px solid #333;

✅ 方案2：box-shadow 阴影实现（✅ 简洁，兼容性好，适合简单线条）

• 核心原理

利用 box-shadow 的**扩散半径（blur-radius=0）**特性，设置 box-shadow: 0 0 0 0.5px #333，扩散半径为0.5px时，会生成一个无模糊的0.5px阴影，视觉上等同于0.5px线条，无需嵌套元

素，代码极简。

• 代码实现（水平0.5px线）

Code block

1.line-05-shadow { 2width: 100%;

3height: 0; /* 高度为0，仅靠阴影显示 */ 4box-shadow: 0 0 0 0.5px #333; /* 关键：扩散半径0.5px */

5}

• 优势：代码一行搞定，无需缩放，无位置偏移问题
• 注意：部分旧版Android机阴影颜色略有偏差，视觉上无影响

✅ 方案3：background-image 线性渐变实现（✅ 精准，无缩放，适合复杂场

景）

• 核心原理

通过 linear-gradient 线性渐变，创建一个1px高度的背景，让50%区域显示颜色，50%区域透明，视觉上就是0.5px的线条，精准控制，无缩放副作用，支持所有支持CSS3渐变的浏览器。

• 代码实现（水平0.5px线）

Code block

1.line-05-gradient { 2width: 100%;

3height: 1px; /* 基础高度1px */

• 核心原理

移动端高清屏（DPR=2）的物理像素是逻辑像素的2倍，通过设置 viewport 的 initialscale=0.5，将逻辑像素缩放至0.5倍，此时1px逻辑像素 = 1px物理像素，直接设置 1px 线条就是

物理0.5px（视觉上的0.5px），仅适用于移动端项目。

• 代码实现

Code block

1<!-- 第一步：设置viewport缩放0.5 --> 2<meta name="viewport" content="width=device-width, initial-scale=0.5, user-

scalable=no">

Code block

• 优势：物理级0.5px，显示最精准
• 注意：需配合rem布局使用，否则页面元素尺寸会错乱，仅移动端可用

✅ 方案5：CSS mask 遮罩实现（✅ 进阶方案，适合特殊场景）

• 核心原理

通过 mask 遮罩层，只显示线条的一半区域，实现0.5px效果，适合需要半透明、渐变线条的场景，兼容性稍差（支持Chrome/Firefox/Safari，IE不支持）。

• 代码实现

Code block

1.line-05-mask { 2width: 100%;

3height: 1px;