自我总结，欢饮拍砖.

<!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. cyclictest 简介

    1. cyclictest 简介以及安装 1.1 cyclictest 简介 cyclictest 是什么? 看名字应该就能大致猜出来它是一种 test 程序,Cyclictest的维基主页这么介绍它 ...

  2. npm 简单实用命令

    npm -v    查看版本号 npm get global             返回false表示默认本地安装 true全局安装 npm set global=true     设置默认为全局安 ...

  3. Sublime Text 3的常用插件的安装和介绍

    Sublime Text 3的插件安装流程 1.安装Sublime Text 3 2.Package Control组件在线安装: 按Ctrl+`或者点击View 下的show console调出co ...

  4. noi 2016 游记

    先挖个坑..这回大概不会太监吧(大雾 day -2 下午起飞的飞机,晚上到了成都..把东西扔到旅馆后就组队外出觅食了... 街上人不多,逛了半天才发现一家卖本地小吃的小店. KPM:诶诶给我来碗酸辣粉 ...

  5. HDU2063-过山车-匈牙利算法

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  6. find the nth digit（二分查找）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1597 find the nth digit Time Limit: 1000/1000 MS (Jav ...

  7. Linux下采用VI编辑器删除复制或移动多行文本内容

    一.删除多行 单行删除,:1(待删除行号)d 多行删除,:1,10d dd 删除光标所在行ndd删除以当前行开始的n行dw删除以当前字符开始的一个字符ndw删除以当前字符开始的n个字符d$.D删除以当 ...

  8. Win10下安装RabbitMQ以及基本知识学习

    一.为什么选择RabbitMQ?      先说一下场景,这是我们公司遇到,当然我这里不做业务评价哈?虽然我知道他很不合理,但是我是无能为力的.APP端部分注册是Java开发的系统,然后业务端是C#开 ...

  9. Ceph部署（一）集群搭建

    背景 Ceph简介 Ceph是一个分布式存储,可以提供对象存储.块存储和文件存储,其中对象存储和块存储可以很好地和各大云平台集成.一个Ceph集群中有Monitor节点.MDS节点(可选,用于文件存储 ...

  10. 2017年 JavaScript 框架回顾 -- React生态系统

    前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...