div+css背景渐变色代码示例

时间：2022-10-22 08:48:06

用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>

效果图：
div+css背景渐变色代码示例

另外多浏览器兼容代码：

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&plus;css通用兼容性代码整理

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

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

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

  3. div css背景图片不显示

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

  4. div&plus;css清除浮动代码

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

  5. DIV&plus;CSS&colon;如何编写代码才能更有效率

    如何编写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）背景&sol;渐变色函数

    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. putty不能连接linxu，报：connection refused

    用putty连接新装的centos6.5,出现了connection refused问题, 后参考http://blog.sina.com.cn/s/blog_60d2d62a0100tq2l.htm ...

  2. 创建mysql 存储过程

    CREATE PROCEDURE `test_insert_stu`() BEGIN DECLARE num INT; SET num = 0; WHILE (num<10) DO insert ...

  3. php实现验证码

      验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...

  4. php基础04：字符串函数

    <?php //1.strlen(),strlen() 函数返回字符串的长度,以字符计. echo strlen("hello world"); echo "&lt ...

  5. BSP、PSP到底指什么？

    /************************************************************************* * BSP.PSP到底指什么? * 说明: * B ...

  6. NetBeans工具学习之道：NetBeans IDE Java 高速新手教程

    欢迎使用 NetBeans IDE! 本教程通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流.学习完本教程 ...

  7. MySQL分类表设计--根据ID删除全部子类

    在做数据库分类表的时候,通常会有这样的设计:一个字段是ID,另一个字段PID,PID指向自己的上级分类: 这样的设计带来的问题是:我要删除一个类,我希望它的子类全部一起删除: 在不知道分类有多少层级的 ...

  8. UVA424高精度加法

    One of the first users of BIT's new supercomputer was Chip Diller. He extended his exploration of po ...

  9. &lbrack;py&rsqb;&lbrack;mx&rsqb;django模板继承-课程列表页

    课程列表页分析 1,机构类型 2,所在地区 3.排序 学习人数 先分析下 纵观页面,页头页脚都一样. django提供了模板继承. 至少 不同页面的title 面包屑路径 content内容不一致,以 ...

  10. Away3D 学习笔记&lpar;一&rpar;&colon; 加载3DS格式的模型文件

    加载外部的3DS文件分为两种: 1: 模型与贴图独立于程序的,也就是从外部的文件夹中读取 private function load3DSFile():Loader3D { loader = new ...

相关文章