Css设置border从中间向两边的颜色渐进效果

示例如下：

html部分

  <div class="globalTitle">
                        <img src="images/globalTitleleft.png" alt="">
                        <p>供水压力分布</p>
                        <img src="images/globalTitleright.png" alt="">
                    </div>

css部分

.globalTitle {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid;
    border-image: -webkit-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #00BBF2 20%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
    border-image: -moz-linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #00BBF2 20%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
    border-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #00BBF2 20%, rgba(255, 255, 255, 0.00) 99%) 2 2 2 2;
}