Градиент css границы не отображаются в Internet explorer firefox

Question

Я работаю над заголовком wordpress, и мне нужно иметь нижнюю границу градиента, как показано на рисунке ниже.

Это прекрасно работает в Crome, но, похоже, это не работает в IE или Firefox. Я не очень хорошо разбираюсь в css, и я признаю, что получил этот код откуда-то еще. Как создать границу градиента в IE и 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 не поддерживает градиенты в качестве источника изображения для границы образа

Альтернативный способ установить свой результат будет использовать для фона изображений и установки различных вырезку и происхождение для них

.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)