在IE瀏覽器中沒有顯示漸變css邊框firefox

我在wordpress頭上工作，我想要有一個漸變底部邊框，如下圖所示。在IE瀏覽器中沒有顯示漸變css邊框firefox

這在Crome中正常工作，但它似乎並不能在IE或Firefox中工作。我不是很擅長css，我承認我從其他地方獲得了這些代碼。我如何讓漸變邊框出現在IE和Firefox中？

enter image description here

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; 
    /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
}

來源

2015-06-30 Arete

不要感到驚訝，如果你不能得到它工作在IE，這不是很容易得到現代CSS在Internet Explorer中工作。至於使它在Firefox和Chrome中工作，它看起來應該起作用。我可以讓它在Chrome中運行，但Firefox似乎不起作用。嘗試在FF中研究[線性漸變]（https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient）。我認爲你的CSS可能不適合firefox。 – Njord

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>

來源

2015-06-30 20:54:09 vals

這工作。但是由於我使用了填充，所以漸變覆蓋了頂部，底部，左側和右側。如何在文本上使用填充而不在邊界上應用填充？這就是它現在的樣子：http://i.imgur.com/XERV9YG.jpg – Arete

黑暗的背景可以應用於內容框，就像我一樣，也可以應用到填充框。看到我的第二個演示 – vals

好的！這有很大幫助。謝謝 – Arete

要在IE 6-9工作漸變您可以使用此。

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

但它只支持2種顏色。

NOTE：這tool，是非常好的生成漸變。（通過colorzilla）

來源

2015-06-30 19:28:38

謝謝。是否可以使用SVG來完全支持IE和Firefox？如果可能，我寧願在漸變中使用所有顏色。 – Arete

在IE瀏覽器中沒有顯示漸變css邊框firefox

回答

相關問題