我可以在所有現代瀏覽器（IE 9+，Chrome和Firefox）上使用CSS3邊框圖像嗎？

我想使用邊界圖像的流體擴展CSS容器。是否有可能在所有使用某些.js框架的現代瀏覽器上啓用CSS3功能？如果不是，有沒有好的替代品？我可以在所有現代瀏覽器（IE 9+，Chrome和Firefox）上使用CSS3邊框圖像嗎？

爲了什麼，我想實現看一個例子： http://www.css3.info/preview/border-image/

2013-09-26 Bart Burg

爲什麼不試試呢？ –

'-webkit-border-image：url（border.png）30 30 round;' - Safari 5 - '-o-border-image：url（border.png）30 30 round;' - Opera - 'border -image：url（border.png）30 30;' - Normal - 只是一些例子 – Albzi

嗯，它不適用於Safari和Firefox 3.1（Alpha）以外的瀏覽器。我正在尋找一種解決方案，以在所有瀏覽器上啓用此功能 –

邊框圖像屬性不支持IE，檢查：http://caniuse.com/border-image對瀏覽器的支持。

但是，css3pie可以使你有可能在IE中使用6-9的無邊框，圖像： http://css3pie.com/documentation/supported-css3-features/

來源

2013-09-26 09:34:28

+1。我一直在使用CSS3Pie（我很喜歡它），但我沒有意識到他們已經爲它添加了'border-image'。這是一個很大的幫助。 – Spudley

但是，我會這樣說：小心建議將w3schools.com作爲資源;這裏的聲譽非常糟糕。對於瀏覽器支持信息，我建議訪問http://CanIUse.com。 – Spudley

我沒有看過CSS3Pie，但它似乎值得嘗試。我將創建一個測試項目並在不同的瀏覽器中測試它。如果有效，我會更新你的答案！我，我，我... –

簡短的回答是否定的，你不能。

border-image在IE9或IE10中不受支持。不過，它在IE11中可用。

大多數其他瀏覽器都支持它，但是存在很大差距 - 尤其是Android瀏覽器，它在任何版本中都不支持。

近年來引入的大多數閃亮的新瀏覽器功能都可以使用Javascript polyfill庫移植到舊瀏覽器中。這使得開始使用大量這些功能變得更加容易，因爲開發人員可以使用新功能，而不會爲舊版瀏覽器的用戶影響其站點。

~~不幸的是， border-image沒有任何polyfills，所以如果你使用它，你將不得不接受IE < = 10的用戶，android用戶將看不到你的邊框圖像。抱歉。~~

糾錯：好像CSS3Pie已經爲border-image添加了polyfill支持。這是非常好的;我一直是CSS3Pie的粉絲，但我並不知道他們已經添加了這個功能。它看起來好像不是100％功能完整，但它真的很好。

Android用戶和其他一些舊版瀏覽器仍然存在問題，但使用CSS3Pie支持它，使用它的最大障礙已被刪除。好一個。

請參閱CanIUse以查看此功能的瀏覽器兼容性圖表。

來源

2013-09-26 09:37:39 Spudley

試試這個代碼。此應該成爲需要IE瀏覽器:)

.borderImg{ 
 
background-image:linear-gradient(to left, rgb(255, 255, 255), rgb(221, 221, 221), rgb(221, 221, 221), rgb(255, 255, 255) 100%); 
 
\t background-repeat : no-repeat; 
 
\t background-size :600px 3px; 
 
\t background-position:bottom; \t 
 
    \t padding-bottom:8px; 
 
    width:100%; 
 
    text-align:center; 
 
    }

<div class="borderImg"> 
 
    Applying border 
 
</div>

來源

2016-06-15 11:40:02

我可以在所有現代瀏覽器（IE 9+，Chrome和Firefox）上使用CSS3邊框圖像嗎？

回答

相關問題