图片渐隐效果存在黑边

事情的起因是前几天ui在验收新需求的时候，突然给我提了一个bug，说有个图片实现效果不对，多了一条黑边。 我打开测试环境一看，还真是有问题。

可以看到，页面里图片底部确实多了一条黑边。 那就奇怪了，我在代码里没有给图片加边框啊，而且这不连续的黑边肯定也不是加了border的效果。 我又去看了下图片的源文件

可以看到图片很正常,那么问题出在哪里呢？ 首先我们回顾下需求，需求很简单，就是在图片上实现一个渐变隐藏的效果。以下是实现代码：

<div class="body-header-right">
    <img :src="src" alt="">
  <div class="img-mask"></div>
</div>

.body-header-right {
    position: relative;
    >img {
        height: .78rem;
        width: .78rem;
    }
    .img-mask {
        width: .78rem;
        height: .25rem;
        bottom: 0;
        position: absolute;
        background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 1%,#fff);
    }
}

思路很简单，就是在图片上方设置一个遮罩，并给遮罩实现一个渐变的背景。 既然如此，问题应该出现在遮罩上。有没有可能是遮罩无法遮住图片底部？ 于是尝试把bottom:0改成bottom: -0.01rem，再看效果：

果然，图片正常了。