在网页布局中，我们经常会用伪元素来做一些遮罩、蒙层或者背景覆盖的效果。但不少人在实际开发中发现，伪元素明明已经设置了宽高铺满父容器，却在边缘位置露出一条细细的白边，非常影响视觉效果。这种现象大多和渲染机制、盒模型计算有关。
为什么伪元素覆盖会出现白边
白边通常不是因为代码写错，而是下面几种情况导致的：
- 父容器或伪元素存在默认边框、内边距，导致伪元素并未真正贴边。
- 浏览器在缩放或高分屏下产生亚像素渲染缝隙。
- 伪元素背景色与父级背景之间因层叠上下文出现漏底。
方法一：使用负边距扩展伪元素
通过给伪元素设置负值的偏移和超出父级的尺寸，可以让它稍微向外扩张，从而盖住可能存在的缝隙。示例代码如下：
.parent {
position: relative;
background: #fff;
overflow: hidden;
}
.parent::after {
content: '';
position: absolute;
/* 向四周各扩展1px，盖住白边 */
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: #333;
z-index: 1;
}
这种方式简单直接，适合绝大多数覆盖场景。
方法二：用内阴影填补缝隙
如果不想改变伪元素尺寸，也可以利用 box-shadow 的内阴影，在伪元素内侧模拟一层同色阴影，把漏出来的白边压住。
.card {
position: relative;
background: #fff;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: transparent;
/* 内阴影颜色和覆盖色一致 */
box-shadow: inset 0 0 0 1px #333;
z-index: 2;
}
这两种方法都能有效解决伪元素覆盖时的白边问题，你可以根据具体的布局结构选择更方便的一种。