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:DXImageTransform.Microsoft .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中文网其他相关文章！