Html 如何获得两种不同颜色的边框图片

我有一张HTML图片，我想用两种不同颜色和不同宽度设置一个边框，下面是一个示例：

到目前为止，我有以下代码：

<style>
#stream
        {
            border-style: solid;
            border-width: 0px 20px;
            border-left-color: #00b000;
            border-right-color: red;
            border-left-image: linear-gradient( 0deg, blue 80%, red 80.001%); /*Not working*/
        }
</style>
<img id="stream" src="bla.png">

---

我尝试使用线性渐变，但效果不如预期。我不希望褪色。

您可以使用before元素，只需在图像后面放置一个矩形：

顺便说一句，你有一个伟大的想法梯度背景。只需使颜色变化更为剧烈：

使用CSS3 border image属性并选择一个合适的图像以环绕图片

见：和 您还可以将上述详细信息与SVG语法结合使用来创建动态边框图像

因此：

CSS Border.png是一个两种颜色的小文件，如下所示： 在您的问题图片中详细说明

.module {
  border-image-source: url('/path/to/border.png');
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: space;
}

HTML

---

您好，非常感谢您的回答和您对我的英语错误的纠正，我考虑了我的问题，并更新了图片。我想开发一款带摄像头的遥控车图像是摄像头的流，两个边框表示遥控车到障碍物的距离，就像激光雷达一样，就像进度条一样，但垂直，但我尝试的每一件事都不起作用，我真的很抱歉我的英语，我希望你能理解你在寻找这样的东西：

background: linear-gradient( 0deg, blue 80%, red 80.001%); 

.module {
  border-image-source: url('/path/to/border.png');
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: space;
}

 <img src="bla.png" class='module'>