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;} 
时间: 2024-10-25 09:02:28

ie兼容CSS3渐变写法的相关文章

IE6/7/8如何兼容CSS3属性

最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下: .pie_radius{ width:250px;height:250px; background-color:#345

详解CSS3渐变

渐变,指形状或颜色的有规律性的变化,往往可以给人很强的节奏感和审美情趣,这里研究的主要是颜色的渐变.渐变的形式在日常生活中很常见,在网页中的用的也很多,传统网页技术中往往用图片来实现渐变,容易带来加载负担和动态定制的瓶颈. CSS3提供了实现渐变的属性,随着浏览器的逐步支持,研究CSS3渐变已势在必行.涉及CSS渐变的属性主要有linear-gradient.radial-gradient.repeating-linear-gradient.repeating-radial-gradient四个

css3渐变详解

今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色); Linear:渐变的类型(线性渐变): 渐变的形式:可选参数 有两种方式-1.设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换. 2.使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbott

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样

CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

【代码片段】CSS3 渐变(CSS3 Gradients)

background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(t

Css3渐变(Gradients)-径向渐变

CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你也可以指定渐变中心.形状(圆形或椭圆形).大小. 默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落) 语法: background: radial-gradient(center, shape