html - 边框图像 : linear gradient not working in IE and Edge

Question

我之前看过几个与此相关的问题，但没有一个对我有用。

我有以下分隔线:

body {
  background: black;
}

.diver {
  padding: 30px 0px;
}

.divider .wrapper {
  margin: 0 auto;
}

.divider .wrapper .seperator {
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  padding: 20px 0 13px;
  background-size: 15px;
}

.divider .wrapper .seperator--lightBlue {
  -o-border-image: linear-gradient(to right, transparent calc(50% - 1px), #B2E9E8 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 1;
  border-image: linear-gradient(to right, transparent calc(50% - 1px), #B2E9E8 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 1;
}

<div class="divider">
  <div class="wrapper">
    <div class="seperator seperator--lightBlue"></div>
  </div>
</div>

以上内容不会在 IE 和 Edge 中呈现。

我尝试过的:

添加一个过滤器:

.seperator--lightBlue {
    border-image: linear-gradient(to right, 
                  transparent calc(50% - 1px), 
                  #B2E9E8 calc(50% - 1px) calc(50% + 1px), 
                  transparent calc(50% + 1px)) 1;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#B2E9E8', endColorstr='#B2E9E8');
}

并使用 this tool 生成渐变。但这只是在整个 div 上创建了一个蓝色背景，而我只是希望它在线条上。

Answer 1

尝试使用以下代码:

<style>
    body {
        background: black;
    }

    .diver {
        padding: 30px 0px;
    }

    .divider .wrapper {
        margin: 0 auto;
    }

        .divider .wrapper .seperator {
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            padding: 20px 0 13px;
            background-size: 15px;
        }

        .divider .wrapper .seperator--lightBlue {
            border-image: linear-gradient(to right, transparent calc(50% - 1px), #B2E9E8 calc(50% - 1px), #B2E9E8 calc(50% + 1px), transparent calc(50% + 1px)) 1;
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#B2E9E8', endColorstr='#B2E9E8');
        }
</style>
<div class="divider">
    <div class="wrapper">
        <div class="seperator seperator--lightBlue"></div>
    </div>
</div>

结果如下(使用IE和Microsoft Edge浏览器):