CSS 中的奇怪黑边

Question

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

#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

Answer 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;
}

最有可能发生的原因是 background-image 和 border-image 结合在一起，但 border-right: 0 应该可以解决它。

CSS 中的奇怪黑边

Weird Black Border in CSS

html

css

gradient

border

linear-gradients