自我总结，欢饮拍砖.

<!DOCTYPE HTML>
<html lang="en">
<head>
     <meta content="text/html;charset=UTF-8">
     <title>Document</title>
     <style type="text/css">
     #div1{ width:300px; height:300px; border: 1px solid black;}
     .gradient{
          background:-webkit-linear-gradient(top,#FFFFFF,#d33027);  /*以webkit浏览器引擎为基础的浏览器可以识别:chrome,opera , safari*/
          background:-moz-linear-gradient(top,#FFFFFF,#d33027);    /*支持火狐浏览器*/
          background:-ms-linear-gradient(top,#FFFFFF,#d33027);  /*支持ie10及ie以上版本*/
          background:linear-gradient(top,#FFFFFF,#d33027);
          -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#d33027)"; /*支持ie8,9*/
          +background:#eca7a3;   /*ie6,,ie7不支持，则取中间色*/
     }
     </style>
</head>
<body>
     <div id="div1" class="gradient"></div>
</body>

</html>

参考自：梦想天空 http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

htmlcss渐变及兼容性的更多相关文章

  1. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  2. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  3. css实现文字渐变

    css文件渐变虽然兼容性比较差,但是用在移动端和chrome中还是没有问题的. 实现文件渐变的方法有两种 1. 使用 background 的属性 2. 使用 mask 属性 方式一. <!DO ...

  4. html+css笔记

    文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式):    <!DOCTYpE HTML>   HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...

  5. DragLayout: QQ5.0侧拉菜单的新特效

    一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术   ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...

  6. icon-font图标介绍

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

  7. 响应式Web图形篇 —— icon fonts 的探析及应用

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

  8. 使用icomoon把svg图片生成字体图标

    今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...

  9. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...

随机推荐

  1. JavaScript字符串转换成数字的三种方法

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...

  2. VS2012 TFS解决离职后代码遗留未迁入问题

    第一步: 在命令行中输入 C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE 第二步: 根据用户查找该用户下workspac ...

  3. c++(链表逆转)

    链表逆转是面试环境中经常遇到的一道题目,也是我们在实际开发中可能会遇到的开发需求.和线性逆转不一样,单向链表的节点需要一个一个进行处理.为了显示两者之间的区别,我们分别对线性内存和链表进行逆转: (1 ...

  4. Oracle实战笔记（第三天）

    导读 今天的主要内容有:java连接Oracle.事务.Oracle中的事务处理.Oracle函数. 一.Java连接Oracle的两种方式 第一种:桥连接(JDBC_ODBC)(不推荐) 1.准备工 ...

  5. Django App(二) Connect Mysql & defualt App admin

    这一篇接着上一篇polls App自动创建admin app.     1.安装数据库 这里的内容从官网看越看越像 EntityFramework的内容.Python支持SQLite,MySql,Or ...

  6. java开发都需要学什么

    1.java基础 2.JSP+Servlet+JavaBean 环节主要 懂流程 MVC而已 别往深了研究 现 开发基本 用 模式 3.Struts+Hibernate+Spring 才 开发 主流技 ...

  7. PostgreSQL9.6.2的WINDOWS下安装

    下载链接:https://www.enterprisedb.com/downloads/postgres-postgresql-downloads#windows 安装链接:http://www.cn ...

  8. MySql Outer Join 简单化

    查询from语句中的Outer Join可以在多种情况下被简化: 在解析阶段,右外连接操作可以被转变为等下ode值包含left join的操作,在一般情况下,转变: (T1, ...) RIGHT J ...

  9. Oracle问题之ORA-01609、ORA-00362

    Oracle问题之ORA-01609: 日志 4 是线程 1 的当前日志 - 无法删除成员 Oracle问题之ORA-00362: 要求输入成员以组成组 4 中的有效日志文件

  10. CCF系列之数位之和(201512-1)

    试题编号: 201512-1试题名称: 数位之和时间限制: 1.0s内存限制: 256.0MB问题描述: 问题描述 给定一个十进制整数n,输出n的各位数字之和. 输入格式 输入一个整数n. 输出格式 ...