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. Unity插件 - MeshEditor(一) 3D线段作画 & 模型网格编辑器

    之前,因为工作需要,项目中需要动态生成很多的电线,不能事先让模型做好,更不能用LineRenderer之类的,因为画出来没有3D的效果,最主要是拐角的时候还容易破面,而我们要的是真真实实纯3D的电线, ...

  2. UNIX环境高级编程——时间和日期

    由UNIX内核提供的基本时间服务是计算自国际标准时间公元1970年1月1日00:00:00以来经过的秒数.这种秒数是以数据类型time_t表示. 1.     time函数返回当前时间和日期: tim ...

  3. python字符串与数字类型转化

    数字转字符串:str(数字),如str(10) 相反:int(字符串),如int('10') 另外,import string后 用string.atoi('100',base),转换为int,bas ...

  4. 分布式进阶(十三)Docker Container间实现数据共享

    sudo docker run -it -v /usr/lib:/usr/lib/dbdata --name dbcontainer-192.168.1.184 ubuntu:14.04 sudo d ...

  5. JAVA之旅(十一)——RuntimeException,异常的总结,Package,jar包,多线程概述

    JAVA之旅(十一)--RuntimeException,异常的总结,Package,jar包,多程序概述 继续JAVA之旅 一.RuntimeException 在Exception种有一个特殊的子 ...

  6. Android之BaseAdapter的优雅实现

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

  7. MSM平台RPM

    Software Component Block Diagram RPM(Resource Power Manager)是高通MSM平台另外加的一块芯片,虽然与AP芯片打包在一起,但其是一个独立的AR ...

  8. struts2 令牌 实现源代码 JSP

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  9. 查看Linux系统的平均负载

    1.Linux系统的平均负载的概念 有时候我们会觉得系统响应很慢,但是又找不到原因,这时就要查看平均负载了,看它是否有大量的进程在排队等待.特定时间间隔内运行队列中的平均进程数可以反映系统的繁忙程度, ...

  10. VS2005宏无法运行的问题(打了补丁MS14-009之后)

    VS2005宏无法运行的问题(打了补丁MS14-009之后) 部门很多同事都是使用VS的宏来给源文件添加文件头,给函数.类添加注释等等,大概是14年2月份之后(根据lucifer提供的时间),这些宏突 ...