使用 border-image 时如何防止边框出现在图像的顶角？

Question

我正在使用

border-image

向图像底部添加线性渐变边框。 然而，图像的顶角也显示了边框，即使我只希望它出现在底部。 这是一张说明问题的图片：

我已将以下 CSS 应用于图像容器：

见：https://codepen.io/ISsamDev99/pen/ExedPvx

.articles img {
    display: block;
    max-width: 100%;
    border-bottom: solid 3px ;
    border-top-right-radius: var(--main-border-radius);
    border-top-left-radius: var(--main-border-radius);
    border-image: linear-gradient(to left ,red, blue) 27 / 30px;
}

我希望边框只出现在图像的底部，图像的顶角不受影响。

Answer 1

定义

border-image

的宽度，将其从顶部/左侧/右侧移除

border-image-width: 0 0 30px 0;