自我总结，欢饮拍砖.

<!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. 学习 node.js 搭建web服务器

    开始 学习使用 node.js 首先完成搭建一个 web服务器.myweb.js var http = require('http'); var url = require('url'); var h ...

  2. Java A+B(个人模版)

    JavaA+B: import java.io.*; import java.util.*; import java.math.BigInteger; import java.util.Scanner ...

  3. 1022: [SHOI2008]小约翰的游戏John【Nim博弈，新生必做的水题】

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2709  Solved: 1726[Submit] ...

  4. UVA - 12050-Palindrome Numbers

    12050 - Palindrome Numbers Time limit: 3.000 seconds A palindrome is a word, number, or phrase that ...

  5. CF 610E. Alphabet Permutations

    题目:http://codeforces.com/problemset/problem/610/E 如果存在c1,c2在原串相邻且在询问串中c1在c2前面的话,把它们在原串出现次数加起来记作sum,那 ...

  6. BZOJ2001: [Hnoi2010]City 城市建设

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2001 cdq分治+重建图. 可以保留当前一定会被选的非修改边然后把点缩起来.这样的话每次点数至 ...

  7. c语言基础学习05

    =============================================================================涉及到的知识点有:for循环有两种写法.数组. ...

  8. iOS学习——键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发 ...

  9. nodeJS里面的模块

    this 打开cmd,执行如下命令 nodeconsole.log(this); 输出如上信息,表示this是global,每个电脑的配置信息不一样的话,可能会有所差别的. 然后新建一个文件,写下如下 ...

  10. TP5使用phpmailer实现邮件发送

    1.从github下载PHPMailer,在vendor目录中新建文件夹phpmailer,将压缩包中的class.phpmailer.php和class.smtp.php复制到phpmailer中, ...