ie兼容CSS3渐变写法
在css3之前要想做背景色渐变就只能采用添加背景图片的方法,但是随着css3:linear-gradient属性的出现,就可以避免使用添加背景图片的方法,从而优化了性能。但是inear-gradient属性在ie9以下是无效的,但是可以采用ie滤镜的方法。
比如:黑色渐变到白色,代码如下:
.gradient{
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}
ie 滤镜:filter
linear-gradient 在 ie9 以下是不支持的,所以对于 ie6 - ie8 我们可以使用滤镜来解决,代码如下:
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
由于 filter 是 ie 的私有属性,所以我们需要针对 ie9 单独处理滤镜效果,代码如下:
:root {filter:none;}
综上所述,线性渐变的兼容写法如下:
.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}
ie兼容CSS3渐变写法的更多相关文章
- IE6/7/8如何兼容CSS3属性
最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https: ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- HTML5 声明兼容IE的写法(转载)
HTML5 声明兼容IE的写法(转载) 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <!--[if IE]> <meta http-eq ...
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)
IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...
随机推荐
- POJ3274-牛的属性-HASH-ACM
原题:POJ3274 参考:进击的阿俊 已知有n头牛,用一个K位二进制数Ak,Ak-1,...,A1表示一头牛具有的特征,Ai=1表示具有特征i.现给定按顺序排列的N头牛的k位特征值,称某个连续范围内 ...
- linux自动备份文件和数据库并上传到指定的远程FTP中
直接把以下脚本复制到/root/backup.sh[root@lvtao.net ~]# chmod +x /root/backup.sh[root@lvtao.net ~]# crontab -e0 ...
- CHROME下载地址
Chrome官方独立中文安装包下载地址 一般我们安装Google Chrome浏览器都是访问 http://www.google.com/chrome/?hl=zh-CN 然后下载运行ChromeSe ...
- bzoj3639: Query on a tree VII
Description You are given a tree (an acyclic undirected connected graph) with n nodes. The tree node ...
- Python模块解析之SocketServer(三)——模块思想
SocketServer 体系 由两个部分构成 BaseServer 和 BaseRequestHandler.思想很简单 BaseServer接受请求,将请求交给BaseReques ...
- Eclipse中查找接口实现类快捷键
就是点击某个接口某个方法名字的时候,直接跳到它的某个实现类里面,一般我们习惯对着那个接口的方法按F3,但是这会直接跳到接口类的源码中,那么呵呵,我们换一个ctrl+T 然后自己选择一下实现类就进去了. ...
- c# 基础连接已经关闭: 连接被意外关闭,错误的解决
原文:c# 基础连接已经关闭: 连接被意外关闭,错误的解决 调试一个使用HttpWebRequest模拟提交表单的程序的时候频繁出现上述错误提示,google了一下发现了几个解决方案.1.在appli ...
- 1031. Hello World for U (20) PAT
题目:http://pat.zju.edu.cn/contests/pat-a-practise/1031 分析: 简单题,调整数组的输出次序就可以了. 输入数组长度为len.n1 = n3 = (l ...
- mysql处理字符串的两个绝招:substring_index,concat
mysql处理字符串的两个绝招:substring_index,concat 最近老是碰到要处理数据库中字符串的处理,发现用来用去也就是这两个函数: 1.substring_index(str,del ...
- 修改css
.content{ height: 100%; } .con{ border: 1px solid #eeeeee; display: inline-block; width:86.8%; ##修改这 ...