伪元素前后的额外像素

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>

图片中不太清楚，但在浏览器中，背景图像的所有侧面都多了1倍，除了左侧多了2倍。

输出：左侧上的粗线

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>

Answer 2

我没有足够的声誉发表评论。我可以确认这个解决方案是唯一有效的。

它还适用于两个before和after元素，其中一个元素具有transform: skewX(-15deg);。为了确保缩放时没有1px错位，将transform: skewX(0.1deg);应用于其他伪元素。这在查看时没有什么区别，但足以将元素从画布中取出并应用抗锯齿，以防止缩放时出现1px错位。