用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. 基于redis实现可靠的分布式锁

    什么是锁 今天要谈的是如何在分布式环境下实现一个全局锁,在开始之前先说说非分布式下的锁: 单机 – 单进程程序使用互斥锁mutex,解决多个线程之间的同步问题 单机 – 多进程程序使用信号量sem,解 ...

  2. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  3. Sql Server系列：Transact-SQL概述

    结构化查询语言(Structure Query Language,SQL)是对数据库进行查询和修改的语言.Transact-SQL是SQL的一种实现形式,它包含了标准的SQL语言部分. 根据完成的具体 ...

  4. 那些让IE6-8羞愧的替补型js

    1,html5shiv 这个js特别简单,可以让IE8识别一些新的标签,常用的比如 header footor section,就能使用更好的语义的标签了. 引入方式: <!--[if lt I ...

  5. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  6. Minor【 PHP框架】2.第一个应用与请求的生命周期

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  7. 6-tips-for-managing-property-files-with-spring--转

    原文地址:http://www.summa.com/blog/2009/04/20/6-tips-for-managing-property-files-with-spring What could ...

  8. BroadcastReceiver注册、使用及其权限

    首先声明一个类,此类继承自BroadcastReceiver类,处理Android当中发出的广播事件: public class SMSReceiver extends BroadcastReceiv ...

  9. 【JUC】JDK1.8源码分析之ReentrantReadWriteLock（七）

    一.前言 在分析了锁框架的其他类之后,下面进入锁框架中最后一个类ReentrantReadWriteLock的分析,它表示可重入读写锁,ReentrantReadWriteLock中包含了两种锁,读锁 ...

  10. c#和Javascript中去重总结

    一.前言 去重在我们的开发过程中经常遇到,避免重复元素的添加,我们需要对获取到的集合(包括List.Array等) 做相关的过滤操作.确保对象的唯一性,从而达到保证数据不冗余重复.由于自己是做.net ...