伪元素前后的额外像素

Question

我正在尝试使用前后伪元素创建背景效果，方法是使它比实际元素高和宽一个像素，但它似乎总是在右边或左边有一个额外的像素。这只会在浏览器最大化（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

这看起来像抗锯齿。我想您要么将浏览器的 OS 的缩放级别设置为 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>

伪元素前后的额外像素

Extra pixel in before and after pseudo elements

html

css

background-image

absolute

pseudo-element