linear-gradient 是绘制 1px 边框最稳定方案，因其绕过 sub-pixel 模糊、天然支持 border-radius 和 overflow: hidden，且不依赖伪元素、无 pointer-events 问题。
直接用 linear-gradient 画 1px 边框是目前最稳定、兼容性最好、且天然支持 border-radius 和 overflow: hidden 的方案——它不依赖伪元素定位，也不受缩放或 sub-pixel 渲染干扰。
为什么 background: linear-gradient() 能绕过 1px 模糊问题
根本原因是：浏览器对 background-image 的渲染精度远高于 border。当用渐变“画线”时，你控制的是背景图的尺寸和重复方式，而非让渲染引擎去插值一个物理像素宽度的边框。只要 background-size 设为 1px 1px 或明确的单像素方向尺寸，再配合 repeat，就能在 DPR=2/3 设备上精准占据 1 物理像素。
- 不触发 sub-pixel 插值：因为没用到
border-width，也就避开了浏览器对非整数边框的模糊处理 - 天然适配圆角：
border-radius会同时裁剪内容区和背景图，无需额外 hack - 不拦截事件：没有伪元素，
pointer-events问题不存在 - 可动态响应高度/宽度：用
repeat-y/repeat-x就能应对不确定尺寸容器
单边边框：用 background-image + 方向参数 + background-position
关键不是“写对渐变”，而是让渐变只出现在目标边缘，并严格控制它的物理尺寸。比如下边框：
.border-bottom-1px {
background-image: linear-gradient(to bottom, #000, #000);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: left bottom;
background-origin: content-box; /* 避免 padding 区域也被画上 */
}
- 必须写
to bottom（不能省略）：旧版 Safari 对无方向的linear-gradient(#000, #000)渲染异常 -
background-size: 100% 1px表示“宽度铺满、高度固定 1px”，这是实现单边的关键 -
background-origin: content-box防止渐变从 padding 区开始画，导致“边框内渗” - 左边框要改
to right+background-size: 1px 100%+background-position: left top
四边边框：多背景叠加，顺序和尺寸必须一一对应
用逗号分隔多个渐变，每个负责一边。注意书写顺序（上 → 右 → 下 → 左）和 background-size 必须匹配方向：
.border-1px {
background-image:
linear-gradient(to bottom, #000, #000),
linear-gradient(to right, #000, #000),
linear-gradient(to top, #000, #000),
linear-gradient(to left, #000, #000);
background-size:
100% 1px, /* 上 */
1px 100%, /* 右 */
100% 1px, /* 下 */
1px 100%; /* 左 */
background-repeat: no-repeat;
background-position:
left top,
right top,
left bottom,
left top;
background-origin: border-box;
}
- 四个渐变必须写全，漏掉任意一个会导致该边缺失
-
background-origin: border-box是为了确保右/下边框能贴住容器外沿（尤其在有padding时） - 如果容器有
border-radius，这个方案仍能正常圆角；但伪元素方案容易在圆角处露白或错位 - 颜色不一致？直接改对应渐变里的色值，不用动结构
容易被忽略的裁剪与溢出陷阱
很多人写了渐变边框，结果发现颜色“跑进内容里了”，或者在 overflow: hidden 容器中被截断——这不是渐变写错了，是 background-clip 和父容器限制没处理好。
-
background-clip: border-box是默认值，但如果你显式写了padding-box或content-box，就会导致边框区域不被绘制 - 当父容器设了
overflow: hidden，而你的渐变背景起始位置超出容器边界（比如用inset: -1px拉伸），会被直接裁掉——此时应改用background-origin: border-box+ 显式background-position - 动态高度容器慎用
background-size: 100% 1px：若内容撑高后未触发重绘，下边框可能消失；更稳妥的是background-size: 1px 1px+background-repeat: repeat-y（垂直边）或repeat-x（水平边）
真正难的不是写出这四行渐变代码，而是意识到：它解决的从来不是“怎么画一条细线”，而是“怎么让这条线永远落在物理像素网格上”。一旦你开始检查 computed styles 里的 top、left、width 是否全为整数，就离真正稳定的 1px 不远了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
