background: -webkit-linear-gradient(top,#ffffff,#f5f5f5);
background: -moz-linear-gradient(top,#ffffff,#f5f5f5);
background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5));
background: linear-gradient(top,#ffffff,#f5f5f5);
background: -ms-linear-gradient(top,#ffffff,#f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5); 左右: background: -webkit-linear-gradient(left,#41caf4,#5399f6);
background: -moz-linear-gradient(left,#41caf4,#5399f6);
background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6));
background: linear-gradient(left,#41caf4,#5399f6);
background: -ms-linear-gradient(left,#41caf4,#5399f6);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6); 相关说明:
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。 filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
其中各个参数的含义如下:
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。 filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

  

CSS样式渐变代码,兼容IE8的更多相关文章

  1. CSS样式初始化代码

    CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化 ...

  2. js css样式操作代码(批量操作)

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

  3. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  4. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  5. 分享一下自己在用的CSS样式重置代码

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

  6. css样式初始化代码总结

    编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...

  7. CSS样式补充代码

    CSS符号属性: list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roma ...

  8. 常用的CSS样式示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS样式渐变写法

    .first_tree li:hover{ color:#FFF; cursor:pointer; background-color:#ff8a00; background: -ms-linear-g ...

随机推荐

  1. 【一天一道LeetCode】#84. Largest Rectangle in Histogram

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given n ...

  2. Linux下修改主机名步骤

    Linux下修改主机名为gpdb 步骤一.运行vi /etc/sysconfig/network命令 NETWORKING=yesHOSTNAME=gpdb 步骤二.运行hostname gpdb命令 ...

  3. 阿里电话面试问题----100万个URL如何找到出现频率最高的前100个?

    内推阿里电话面试中面试官给我出的一个题: 我想的头一个解决方案,就是放到stl 的map里面对出现的频率作为pair的第二个字段进行排序,之后按照排序结果返回: 下面口说无凭,show your co ...

  4. Github搭建属于自己的开源项目-androd学习之旅(72)

    Github是一个基于的git的版本控制工具,分为私人代码管理和开源代码管理,下面我们简单的介绍一下 首先登陆官网https://github.com 完成注册,随后首页会有四个模块,第一个是安装的指 ...

  5. MySQL学习笔记_3_MySQL创建数据表(中)

    MySQL创建数据表(中) 三.数据字段属性 1.unsigned[无符号] 可以让空间增加一倍 比如可以让-128-127增加到0-255 注意:只能用在数值型字段 2.zerofill[前导零] ...

  6. DQM Serial Sync Index Program ERROR

    Error syncing hz_stage_party_sites_t1:ORA-20000:Oracle Text 错误: DRG-10502:索引AR.HZ_STAGE_PARTY_SITES_ ...

  7. Linux 中环境变量设置

    本文主要整理自以下博文: .bash_profile和.bashrc的什么区别及启动过程 linux环境变量设置方法总结(PATH/LD_LIBRARY_PATH) .bash_profile 和 . ...

  8. 《Ext JS 4.2 实战》可以买了

    今天编辑告诉我,在网上可以买到这书了,购买链接是http://www.amazon.cn/Ext-JS-4-2%E5%AE%9E%E6%88%98-%E9%BB%84%E7%81%AF%E6%A1%A ...

  9. 地产IT人福利:帆软地产BI解决方案全解析

    解决方案下载地址 帆软大型地产集团项目解决方案 下载地址:http://pan.baidu.com/s/1pJGeqKF帆软地产BI解决方案之KPI考核系统 下载地址:http://pan.baidu ...

  10. 使用钩子参与到TCP拥塞事件的处理中

    TCP定义了几个拥塞事件,当这些事件发生时,我们可以通过TCP的拥塞控制算法,调用自定义的处理函数, 来做一些额外的事情的.也就是说,我们可以很简便的参与到TCP对拥塞事件的处理过程中. Author ...