网页中的渐变色区域,渐变色背景,一般都是通过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. El中调用静态方法

    最近在项目中遇到需要调用静态方法的问题,形如: <c:forEach items="beans" var="bean"> <p>总数:$ ...

  2. 开发组件:REST API

    REST API 最佳入门指南 https://blog.csdn.net/px01ih8/article/details/78674685

  3. python高亮显示输出

    知识内容: 1.高亮输出语法 2.高亮输出实例 前言: 在做购物车这道题时遇到了高亮显示输出某些内容的需求,于是就学了一下这方面的知识,以下是python高亮显示输出的使用方法: 购物车链接:  ht ...

  4. 搭建 yum 仓库

    翻译来自:https://wiki.centos.org/HowTos/CreateLocalRepos 本地仓库 http 仓库 测试 Steps: 1.把rpm包放在一个目录中.可以根据需要在该目 ...

  5. 关于putty连接百度云linux服务器那些事

    看有活动,30元半年的百度云服务器,就直接买了当练手的玩 买完之后,发现使用putty不能直接连接百度云的centos服务器, 用了putty和ssh都不能连接 试了好几次,都打算尝试用秘钥对的形式了 ...

  6. mysql 忽略某个错误 继续执行

    执行如下存储过程: CREATE  PROCEDURE `aa`()BEGINcall RealtimeData_9035();call RealtimeData_9504();call Realti ...

  7. Spring MVC 自定义视图

    实现View import org.springframework.stereotype.Component; import org.springframework.web.servlet.View; ...

  8. Posting JSON to Spring MVC Controller

    Spring MVC can be setup to automatically bind incoming JSON string into a Java object. Firstly, ensu ...

  9. C#--抽象工厂设计模式原理

    C#--抽象工厂设计模式原理 C#--抽象工厂设计模式--三层框架 C#--使用反射改进简单工厂

  10. vue 项目部署后 刷新一下 页面找不到 解决

    1.修改配置router的参数  (效果不好) 2. (不能解决 出现403) 后端配置例子 Apache <IfModule mod_rewrite.c> RewriteEngine O ...