用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器。

从黄到红示例：http://keleyi.com/keleyi/phtml/divcss/2.htm

代码：

<style type="text/css">

.jbkeleyi{

height: 300px;

width:100px;

margin:0px auto;

background-image: -moz-linear-gradient(top, #F00, #000);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#FF0000', GradientType='0');

}

</style>

</head>

<body>

用CSS是div颜色渐变：<br />

<div class="jbkeleyi">从绿到红<br /><br />keleyi.com</div>

效果图：

另外多浏览器兼容代码：

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

更详细内容请参考：http://keleyi.com/a/bjac/cp4alo5k.htm

div+css背景渐变色代码示例的更多相关文章

  1. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  2. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  3. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  4. div+css清除浮动代码

    <style type="text/css"> .div1{ background:#000080; border:1px solid red;} .div2{ bac ...

  5. DIV+CSS:如何编写代码才能更有效率

    如何编写CSS代码才能更有效率?这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更 ...

  6. css背景渐变色

    张鑫旭关于渐变色博客 菜鸟教程关于渐变色 .img-box{ background: #ec9259; /* 一些不支持背景渐变的浏览器 */ background: -webkit-linear-g ...

  7. css3背景渐变色代码

    从上到下 #grad {  background: -webkit-linear-gradient(red, blue);  background: -o-linear-gradient(red, b ...

  8. CSS3总结二：（background）背景/渐变色函数

    background-color(CSS2) background-image background-position background-size background-repeat backgr ...

  9. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

随机推荐

  1. WCF学习之旅—WCF第二个示例（五）

    二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...

  2. MongoDB 维护Replica Set

    在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...

  3. UML基础系列：类图

    类图描述系统中类的静态结构,它不仅定义系统中的类,描述类之间的联系,如关联.依赖.聚合等,还包括类的内部结构(类的属性和操作).类图描述的是静态关系,在系统的整个生命周期中都是有效的.对象图是类图的实 ...

  4. 【原创】开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. Java 8新特性-2 接口定义增强

    为了解决当原有的接口中方法不足时,向原有的接口中添加新的方法,该接口下的N多实现类也需要重写该方法的问题!Java8引入了接口定义增强概念! Java8 打破了原有的接口的方法定义: 公共的.抽象的  ...

  6. iOS开发之版本控制（SVN）

    版本控制对于团队合作显得尤为重要,那么如何在iOS开发中进行版本控制呢?在今天的博客中将会介绍如何在MAC下配置SVN服务器,如何导入我们的工程,如何在Xcode中进行工程的checkOut和Comm ...

  7. GoldenGate碎碎念

    1. 在启动mgr进程的过程中报如下错误 GGSCI (node1.being.com) > start mgr Cannot - No such file or directory Canno ...

  8. Servlet在启动时加载的tomcat源码(原创)

    tomcat 8.0.36 知识点: 通过配置loadOnStartup可以设置Servlet是否在Tomcat启动时加载,以及按值大小进行有序加载,其最小有效值为0,最大有效值为Integer.MA ...

  9. make things simple

    以前看过一篇文章,具体内容不记得了,只记得它的结论了:懒是人类进步的源动力.当时觉得结论有点新颖,文中列举了大量的实例证明这个结论,其中重点强调了计算机学科.我本身从事算是计算机相关的工作,对文中的部 ...

  10. dsoframer 使用笔记

    dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...