网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE 、Firefox、Chrome 和 和Safari都支持的渐变色效果。

一. 支持IE的css渐变色设置

FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#EEEEEE', endColorstr='#ffffff');

修改参数:GradientType=0:垂直渐变, GradientType=1:默认值,水平渐变。

二. 支持Firefox的css渐变色设置

background:-moz-linear-gradient(top, #EEEEEE, #ffffff);/*Firefox*/

修改参数:top:表示由上到下渐变,其它参数可以是left、right、bottom

三. 支持Safari、Chrome的css渐变色设置

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#ffffff));/*Safari 、Chrome*/

修改参数:(linear, 0 0, 0 bottom,...)中,前边两个0 0控制左右,后边0 bottom控制上下,为从上到下渐变,上边颜色是from(#eeeeee),下边颜色为to(#ffffff).

四. 兼容多种浏览器

<style type="text/css">
.color {
width:260px;
color:#FFF;
float:right;
line-height:25px;
height:25px;
font-weight:bold;
padding-top: 2px;
font-size:13px;
background-color:#F5F3DF;
margin-bottom:5px;
FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FFF0E', endColorstr='#ffffff');/*ie*/
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9FFF0E), to(#ffffff));/*Safari */
background:-moz-linear-gradient(top, #9FFF0E, #ffffff);/*Firefox*/
}
</style>
<div class="color">渐变色区域</div>

兼容主流浏览器的css渐变色的更多相关文章

  1. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  2. (转)兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...

  3. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  4. javascript创建css、js,onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  5. css属性兼容主流浏览器

    目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...

  6. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  7. 兼容不同浏览器的CSS前缀-webkit-,-ms-,-moz-,-o-

    笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分 ...

  8. 实时监听input输入的变化(兼容主流浏览器)【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  9. [转] 实时监听input输入的变化(兼容主流浏览器)

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

随机推荐

  1. shell 6基本运算符

    shell支持多种运算符: * 算数运算符 * 关系运算符 * 布尔运算符 * 字符串运算符 * 文件测试运算符 算数运算符 + 加 `expr $a + $b` 结果为 30 - 减 `expr $ ...

  2. 成为Java顶尖程序员 ,看这11本书就够了

    以下是我推荐给Java开发者们的一些值得一看的好书.但是这些书里面并没有Java基础.Java教程之类的书,不是我不推荐,而是离我自己学习 Java基础技术也过去好几年了,我学习的时候看的什么也忘了, ...

  3. IntelliJ IDEA小问题解决方法------(持续更新)

    1:IDEA运行时报错提示“找不到或无法加载主类”:在确保IDEA开发环境无误后->file->invalidate Cache/restart,之后再重新build.问题解决. 2.如何 ...

  4. jQuery 的noConflict()的使用.

    我们项目现在需要用到两个js库.一个是jQuery库,还有一个是我们自己开发的轻量级的gys.js库. 而gys库对外提供的接口也是$符号.和jQuery库是一样的,这个时候,两个库就会发生冲突了,我 ...

  5. 第15章 高并发服务器编程(2)_I/O多路复用

    3. I/O多路复用:select函数 3.1 I/O多路复用简介 (1)通信领域的时分多路复用 (2)I/O多路复用(I/O multiplexing) ①同一线程,通过“拨开关”方式,来同时处理多 ...

  6. git本地项目上传远程

    Git的安装就不说了. 原文:https://blog.csdn.net/zamamiro/article/details/70172900 github官网说明: …or create a new ...

  7. JS数组对象的方法

    concat 返回一个新数组,这个数组是由两个或更多数组组合而成的 array.concat(b,c); join 返回字符串值,其中包括了连接到一起的数组的所有元素,元素由指定分隔符分割开来 arr ...

  8. myeclipse 代码提示

    from http://fuyiyuan2011.iteye.com/blog/1258264 在软件开发过程中,有了代码提示能使开发能够更加快捷与便利.但在Eclipse ,MyEclipse等ja ...

  9. jsonp 原理

    1 json width padding(内填充); 2.计算机文件的属性 并不是以 文件的后缀名确定的,后缀名只是给人看的: 3.script 标签获取数据后 并不能直接使用: 4.尽可能 少声明 ...

  10. 四大域对象,和jsp的九大隐式对象,已经el表达式的11个隐式对象

    四大域对象 1.PageContext :页面范围的数据 2.ServletRequest:请求范围的数据 3.HttpSession:回话范围的数据 4.ServletContext:应用范围的数据 ...