CSS中奇怪的黑色边框

问题描述

我创建了一个带有淡入淡出背景的盒子。因此，我在右侧有一个奇怪的黑色边框，而且我不知道如何解决。 （丢失的左边框是故意的。）

#fadeBox
{
    width: 300px;
    background-image: linear-gradient(to right,rgba(0,0.7),0));
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to right,#055100,0)) 1 0 1 0 round;
}

Weird_Black_Border_Image.png

解决方法

一个简单的实现就是通过指定border-right：0; 因此，如果您只是想要一个解决方案，而不是为什么会真正发生，请继续执行以下操作：

#fadebox
{
    width: 300px;
    background-image: linear-gradient(to right,rgba(0,0.7),0));
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to right,#055100,0)) 1 0 1 0 round;
    border-right: 0;
}

最有可能发生这种情况的原因是右背景图像和边框图像组合在一起，但是右边框：0应该可以解决它。