边框图像：线性渐变在IE和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中呈现。

我尝试过的事情：

添加一个filter：

.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浏览器）：