htmlcss渐变及兼容性
自我总结,欢饮拍砖.
<!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渐变及兼容性的更多相关文章
- 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 ...
- css3实现颜色渐变以及兼容性处理
有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...
- css实现文字渐变
css文件渐变虽然兼容性比较差,但是用在移动端和chrome中还是没有问题的. 实现文件渐变的方法有两种 1. 使用 background 的属性 2. 使用 mask 属性 方式一. <!DO ...
- html+css笔记
文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式): <!DOCTYpE HTML> HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...
- DragLayout: QQ5.0侧拉菜单的新特效
一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术 ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...
- icon-font图标介绍
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
- 响应式Web图形篇 —— icon fonts 的探析及应用
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
- 使用icomoon把svg图片生成字体图标
今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...
- 手摸手带你学移动端WEB开发
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...
随机推荐
- 关于soapui简介与入门
SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Ecl ...
- FileSaver.js 介绍
这是著名开源项目 FileSaver.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/eligrey/FileSaver. ...
- Git知识总览(三) 分支的创建、删除、切换、合并以及冲突解决
前两篇博客集中的聊了git的一些常用命令,具体请参见<Git知识总览(一) 从 git clone 和 git status 谈起>.<Git知识总览(二) git常用命令概览> ...
- 【转】Memory gates checking failed because the free memory***解决办法
Issue: Vault users cannot connect. VLOGS show the following error: Memory gates checking failed beca ...
- dubbo源码—Service Invoke
dubbo的远程调用过程是怎么样的? dubbo远程过程调用经过了那些处理? 发起远程调用的时候究竟传了什么数据给provider? 要解决这些问题,欢迎一起探讨走进dubbo源码栏目. 在servi ...
- HttpClient(二)HttpClient使用Ip代理与处理连接超时
前言 其实前面写的那一点点东西都是轻轻点水,其实HttpClient还有很多强大的功能: (1)实现了所有 HTTP 的方法(GET,POST,PUT,HEAD 等) (2)支持自动转向 (3)支持 ...
- sql 中文转拼音首字母
http://blog.csdn.net/zhanglong_longlong/article/details/46772571 --可支持大字符集20000个汉字! create function ...
- 用dedecms做网站时,空间服务器选择IIS还是apache???
想做一个dedecms程序的网站,不知道要选择什么样的空间,windows还是linux的?多大的空间比较适合?求高人回答. 如果是基于Linux平台的话,那不必多说自然是Apache了,因为II ...
- 基于VUE的九宫格抽奖功能
HTML代码: <template> <div class="luckDraw"> <title-bar :title="title&quo ...
- sublime text3怎么批量查找替换文件夹中的字符
在编写代码的时候,往往有些代码是重复的,但是如果要改一处代码,其他的地方也要改.那么怎么批量修改呢?下面小编就以sublime text3为例来讲解一下sublime text3怎么批量查找替换文件夹 ...