用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. Android第一天

    ---恢复内容开始--- 一.配置JDK 第一步:右键我的电脑-属性-高级系统设置-环境变量 输入变量名和变量值: 环境变量名和变量值: 变量名:JAVA_HOME 变量值:D:\Java\jdk1. ...

  2. MySQL_02之增删改查、PHP数据库操作

    1.数据操作: ①插入记录:  插入单条记录:INSERT tbl_name(字段名称,--) VALUES(字段值,--);  插入多条记录:INSERT tbl_name(字段名称,--) VAL ...

  3. Overview of OpenCascade Library

    Overview of OpenCascade Library eryar@163.com 摘要Abstract:对OpenCascade库的功能及其实现做简要介绍. 关键字Key Words:Ope ...

  4. MVC4做网站后台:栏目管理1、添加栏目-续

    栏目类型跟原来一样分为常规栏目.单页栏目和外部链接.根据栏目类型的不同要隐藏相应的表单和验证(服务器端验证).另外一个是父栏目必须是常规栏目才行,easyui-combotree要用到树形json数据 ...

  5. ios使用jspatch中需要注意的事项

    第一份代码,为了纠正原代码不显示29号的bug,先上代码 require('NSString','MCDatePickType','NSMutableArray','UIButton'); defin ...

  6. 解决IntelliJ IDEA无法读取配置文件的问题

    解决IntelliJ IDEA无法读取配置文件的问题 最近在学Mybatis,按照视频的讲解在项目的某个包里建立配置文件,然后读取配置文件,但是一直提示异常. 读取配置文件的为官方代码: String ...

  7. Java位运算总结-leetcode题目

    按位操作符只能用于整数基本数据类型中的单个bit中,操作符对应表格: Operator Description & 按位与(12345&1=1,可用于判断整数的奇偶性) | 按位或 ^ ...

  8. Cesium应用篇：2影像服务（下）

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些 ...

  9. 使用脚本操作UpdatePanel中控件的问题

    假设有一个脚本(用js或者jQuery等类似手段编写),为UpdatePanel中的一个普通的TextBox赋值.如果你以为这样写: <head runat="server" ...

  10. YAML 语法

    YAML 语法 来源:yaml 这个页面提供一个正确的 YAML 语法的基本概述, 它被用来描述一个 playbooks(我们的配置管理语言). 我们使用 YAML 是因为它像 XML 或 JSON ...