伪元素前后的额外像素

Question

我正在尝试使用 before 和 after 伪元素创建背景效果，方法是使其比实际元素高和宽一个像素，但它似乎总是在右侧或左侧多出一个像素。这仅在浏览器最大化（Firefox、Chrome 和 Edge）时发生，但在浏览器宽度较小时不会发生。

*, *::before, *::after{ box-sizing: border-box; }

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    background-color: #111;
}

img {
    max-width: 300px;
    display: block;
    padding: 4px;
}

.main-box {
    position: relative;
}

.img-box {
    padding: 0;
    margin: 0;
    background-color: #000;
}

.img-box::before{
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    filter: blur(10px);
    z-index: -2;
}

.img-box::after{
    content: '';              
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
}

.img-box::before, .img-box::after{
    background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
    opacity: 0.7;
    transition: opacity ease-out 150ms;
}

.main-box:hover .img-box::after {
    opacity: 1;
}

<div class="main-box">
   <div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>

在图片中不是很清楚，但在浏览器中，背景图像的所有边都多 1px，除了左侧多 2px。

输出：Thicker line on the left

Answer 1

这看起来像抗锯齿。我猜您的浏览器或操作系统的缩放级别设置为 100% 以外的其他值。

一些浏览器会尝试调整定位，但在某些缩放级别上，这无法正确完成，最终会导致一侧落地，另一侧天花板。

为了避免这种情况，您可以使用translate 属性，该属性应该允许适当的抗锯齿（它会变得模糊，但大小相同）。

*, *::before, *::after{ box-sizing: border-box; }

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    background-color: #111;
}

img {
    max-width: 300px;
    display: block;
    padding: 4px;
}

.main-box {
    position: relative;
}

.img-box {
    padding: 0;
    margin: 0;
    background-color: #000;
}

.img-box::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc( 100% + 2px );
    height: calc( 100% + 2px );
    transform: translate(-1px,-1px);
    filter: blur(10px);
    z-index: -2;
}

.img-box::after{
    content: '';              
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc( 100% + 2px );
    height: calc( 100% + 2px );
    transform: translate(-1px,-1px);
    z-index: -1;
}

.img-box::before, .img-box::after{
    background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
    opacity: 0.7;
    transition: opacity ease-out 150ms;
}

.main-box:hover .img-box::after {
    opacity: 1;
}

<div class="main-box">
   <div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>