如何在 CSS3 中建立跨瀏覽器相容的線性漸層？

CSS3 中的跨瀏覽器線性漸變

在CSS3 中建立線性漸變很容易，但跨瀏覽器相容性可能會很困難挑戰。 Webkit 瀏覽器（Chrome 和 Safari）和 Firefox 使用與 Opera 和 Internet Explorer 不同的語法。

Webkit 和 Firefox 替代品

提供的 Webkit 和 Firefox 語法建立一個從右上角到左下角的對角線線性漸變。以下是如何使用Opera 和Internet Explorer 實現相同的漸變：

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

跨瀏覽器水平漸變

要建立水平漸變，請將「頂部」方向替換為「左”方向或“右”。

Internet Explorer

對於小於10 的Internet Explorer 版本，您需要使用過濾器屬性：

<br>/<em>IE7-</em>/ 過濾器： progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);<br>/<em>IE8 </em>/ -ms-filter: "progid:DXter: "progidform. .Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";<br>

-ms-Filter 語法

-ms-filter 語法如下：

<br>-ms-過濾器： progid:DXImageTransform.Microsoft.Gradient(<pre class="brush:php;toolbar:false"> startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

);

您也可以使用 ARGB 顏色格式，其中 FF 代表不透明，00 代表透明。

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