Gradient css borders not showing in internet explorer an firefox

Question

I am working on a wordpress header and I wanted to have a gradient bottom border as shown in the picture below.

This works fine in Crome, but it does not seem to work in IE or Firefox though. I am not very good at css and I admit I got this code from somewhere else. How can I make the gradient border appear in IE and Firefox?

CSS:

.entry-header {
    /* The main titles links as displayed in the articles*/
    color: #F1F1F1;
    display: inline-block;
    transition: all .3s ease;
    font-family: 'Oswald', sans-serif;
    padding-top: 5%;
    background-color: #1F1F1F;
    width: 100%;
    /*The following code defines the linear gradient colors below each header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    border-top:0px;
    border-right:0px;
    border-left:0px;
    border-bottom: solid transparent;
    border-bottom: 4px;
    -moz-border-image: -moz-linear-gradient(left, #009C61 14.28571429%, #cc0099 28.57142857%, #cc9900 42.85714287%, #cc0033 57.14285716%, #0099cc 71.42857145%, #6600cc 85.71428574%, #66cc00 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #009C61 14.28571429%, #cc0099 28.57142857%, #cc9900 42.85714287%, #cc0033 57.14285716%, #0099cc 71.42857145%, #6600cc 85.71428574%, #66cc00 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #009C61 14.28571429%, #cc0099 28.57142857%, #cc9900 42.85714287%, #cc0033 57.14285716%, #0099cc 71.42857145%, #6600cc 85.71428574%, #66cc00 100%);
    border-image-slice: 1;
    /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
}

Answer 1

Firefox和IE不支持渐变作为border-image的图像源

设置结果的另一种方法是使用背景图像，并为它们设置不同的剪裁和原点

.header {
  width: 400px;
  height: 70px;
    border-top:0px;
    border-right:0px;
    border-left:0px;
    border-bottom: 4px solid transparent;
    background-image: linear-gradient(#1f1f1f, #1f1f1f), linear-gradient(to right, #3acfd5 0%, #009C61 14.28571429%, #cc0099 28.57142857%, #cc9900 42.85714287%, #cc0033 57.14285716%, #0099cc 71.42857145%, #6600cc 85.71428574%, #66cc00 100%);
    background-origin: content-box, border-box;
    background-clip: content-box, border-box;
}

<div class="header"></div>

使用填充

.header {
  width: 400px;
  height: 70px;
  padding: 40px;
    border-top:0px;
    border-right:0px;
    border-left:0px;
    border-bottom: 4px solid transparent;
    background-image: linear-gradient(#1f1f1f, #1f1f1f), linear-gradient(to right, #3acfd5 0%, #009C61 14.28571429%, #cc0099 28.57142857%, #cc9900 42.85714287%, #cc0033 57.14285716%, #0099cc 71.42857145%, #6600cc 85.71428574%, #66cc00 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

<div class="header"></div>

Answer 2

要在IE 6-9上工作渐变，你可以使用它。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=0 );

但它只支持2种颜色。

注意：这个tool非常适合生成渐变。 （通过colorzilla）