如何實現跨瀏覽器相容的線性漸層？

在各種瀏覽器中實作線性漸變

跨瀏覽器相容性

問題：取得線性的跨瀏覽器相容性漸層指定如下：

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Opera 和IE替代方案：

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);  
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

垂直與水平漸變

將漸變修改為水平而不是垂直，請使用以下值作為起點和終點：

top left
top right

例如：

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF);
background-image:      -o-linear-gradient(top, #0C93C0, #FFF);
background-image:         linear-gradient(top, #0C93C0, #FFF);

Internet Explorer

Internet Explorer

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

Internet Explorer

10

對於10 之前的Internet Explorer 版本，請使用以下程式碼：

• 說明
  說明🎜>
  • 前綴用於實驗性CSS屬性：
  • -webkit- 適用於Webkit 瀏覽器（Chrome、Safari）
  • -moz- 適用於Firefox
-o- 適用於Opera-o- 適用於Opera

-ms - 對於Internet Explorer

• 不含前綴的線性漸變表示完全符合 CSS 規範。

參考[ MDN：線性漸變](https://developer.mozilla.org/en-US/docs/Web/CSS/線性漸變)

以上是如何實現跨瀏覽器相容的線性漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！