CSS中奇怪的黑色边框答案

【问题标题】：Weird Black Border in CSSCSS中奇怪的黑色边框
【发布时间】：2020-08-21 06:21:58
【问题描述】：

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

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

Weird_Black_Border_Image.png

【问题讨论】：

尝试给 div 一个高度（或者只是一个文本），那么你应该会看到问题
你能用sn-p工具构造一个我们可以看到的例子吗？这真的会帮助我们找到问题所在。编辑您的问题时，它带有此符号“”
有一张图片显示我的问题。

标签： html css border gradient linear-gradients

【解决方案1】：

一个简单的实现就是指定border-right : 0; 因此，如果您只想要一个解决方案而不想要它发生的原因，请继续使用以下内容：

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

这很可能是因为右背景图像和边框图像组合在一起，但边框右：0 应该解决它。

【讨论】：

好的，谢谢。我用“none”尝试过，用“0px”但不是用0...无论如何，现在可以了，谢谢。
很高兴能提供帮助，毕竟我们都在同一条船上！将您的问题勾选为已回答，以便将来对其他人也有帮助。