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. 用Fiddler在Android上抓包(Http+https)

    Fiddler是一个HTTP协议调试代理工具,在开发网络应用的时候经常会用到,其最基本的作用是能抓HTTP的数据包,当然它还有更高级的用法,如添加断点.修改请求与相应的数据等等... 抓HTTP包 安 ...

  2. iOS&nbsp;APP设计规范大全

    目前最为齐全的iOS APP设计规范大全,Mark一个- 欢迎参考本文,未经许可,严禁转载!

  3. OC中的类别Category-协议Protocol-…

    类别(category)--通过使用类别,我们可以动态地为现有的类添加新方法,而且可以将类定义模块化地分不到多个相关文件中.通常只在类别中定义方法. 类别,接口部分的定义,通常该文件命名为已有&quo ...

  4. 关于jQuery中的trigger和triggerHandler方法的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路

    注:请点击此处进行充电! 1.问题描述:在实现图片轮转时,若将 <script type="text/javascript"> mui("#slider&qu ...

  6. 03_TortoiseGit冲突和补丁演示,补丁冲突

     1 下载TortoiseGit,下载地址: http://tortoisegit.soft32.com/free-download/ 2 创建一个GIT仓库 3 创建克隆,创建两个用于克隆的仓库 ...

  7. AngularJS进阶(十六)脏值检查

    脏值检查 注:请点击此处进行充电! 需求 在项目开发过程中,需要对药店信息进行更改.如下图所示.现在的需求是:当药店信息没有发生变化时,点击"更新信息"按钮,提示"药店信 ...

  8. Android 内核常见目录的作用

    / :根目录 /bin目录 :命令保存目录,普通用户就可以读取的命令. /boot目录 :启动目录,启动相关文件 /dev :设备文件保存目录 /etc :配置文件保存目录 /home :普通用户的家 ...

  9. LeetCode之“动态规划”:Decode Ways

    题目链接 题目要求: A message containing letters from A-Z is being encoded to numbers using the following map ...

  10. Sping--ApplicationEvent

    //让其他的应用事件继承它 public abstract class ApplicationEvent extends EventObject { /** use serialVersionUID ...