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. 青年菜君与小农女送菜商业模式PK

    青年菜君与小农女送菜商业模式PK   对比项 青年菜君 小农女送菜 优势 劣势 开业 2014年3月3日 2013年9月 渠道 地铁捕获用户 写字楼配送 送货 来店面自取 送货到写字楼 菜君 1.减少 ...

  2. Linux多线程实践(9) --简单线程池的设计与实现

    线程池的技术背景 在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收.所以 ...

  3. Linux IPC实践(13) --System V IPC综合实践

    实践:实现一个先进先出的共享内存shmfifo 使用消息队列即可实现消息的先进先出(FIFO), 但是使用共享内存实现消息的先进先出则更加快速; 我们首先完成C语言版本的shmfifo(基于过程调用) ...

  4. Android 纵向跑马灯滚动效果

    像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean ...

  5. Android之BaseAdapter的优雅实现

    在android的开发过程中,我们不可避免的要使用ListView来展示我们的Activity上面的内容.你可以使用很多种方式来实现这一功能,但是如何优雅快速的来实现呢?这就是我要写的了,既为了大家共 ...

  6. Linux下ipconfig分析及C语言实现

    在linux下使用ifconfigl命令能很方便的查看网卡与网线是否连通,运行ifconfig eth0命令大致输出如下: # ifconfig eth0 eth0 Link encap:Ethern ...

  7. Binder和SurfaceFlinger以及SystemServer介绍-android学习之旅(79)

    由于binder机制的存在,使得进程A可以访问进程B中的对象. Android系统Binder机制中的四个组件Client.Server.Service Manager和Binder驱动程序: 1. ...

  8. 新书《Ext JS 4.2实战》即将出版

    目录: 第1章    Ext JS 4概述1.1    从Ext JS 4.0到4.071.2    从4.1到4.1.1a1.3    从4.2到4.2.11.4    如何选择版本1.5    基 ...

  9. LeetCode之“链表”:在O(1)时间删除链表节点

    下边讨论暂不包括尾节点. 一般来说,我们要删除链表中的一个节点是需要知道其上一节点的.但我们真的需要吗? 其实我们可以将待删节点的下一节点的值和指向的下一节点赋予待删节点,然后删除待删节点的下一节点. ...

  10. Android Hal 分析

    本文是基于android4.0.3.对应其他低版本的代码,可能有所差异,但基本大同小异. Android的HAL是为了保护一些硬件提供商的知识产权而提出的,是为了避开linux的GPL束缚.思路是把控 ...