您现在的位置是：网站首页> 编程资料编程资料

兼容IE与firefox的css 线性渐变（linear-gradient）_CSS教程_CSS_网页制作_

2021-09-07 871人已围观

简介兼容IE与firefox的css 线性渐变（linear-gradient）实现代码，需要的朋友可以参考下

现行渐变
首先看下示例
（1）垂直渐变

（2）垂直渐变

IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平

Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数：top、bottom垂直，left、right水平例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

webkit，如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色

复制代码

代码如下:

线性渐变（linear-gradient）---https://www.jb51.net

垂直渐变

水平渐变

上一篇：CSS模拟小箭头的实现代码_CSS教程_CSS_网页制作_

下一篇：CSS3属性box-shadow使用详细教程_css3_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

兼容IE与firefox的css 线性渐变（linear-gradient）_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢