在 Internet Explorer 和 Firefox 中未显示渐变 css 边框

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

但它只支持两种颜色。

注意：这个tool，非常适合生成渐变。 （作者：colorzilla）