gradient渐变IE兼容处理

根据caniuse(http://caniuse.com/#search=gradient),rgba兼容性为IE10以及以上浏览器. 实例代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>gradient 兼容性处理</title> <style type="text/css&…

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr=silver);/*IE<8-9>*/ background-image:-webkit-linear-gradient(top,white,silver); background-image:-moz-linear-gradient(top,white,silver); background-i…

CSS3 Gradient 渐变

转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变.…

ie6+7+8等对background-color:rgba(),background-img渐变的兼容

一,ie8兼容rgba()的解决办法今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到ie8.这个就有点蛋疼了.因为ie8不支持rgba()函数.下面我们总结一下rgba()函数的含义. rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色.所有颜色都可以由这三种颜色拼合而成.a代表透明度.比如rgba(255,255,…

CSS-背景渐变的兼容写法

background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); backgr…

CSS 3 属性学习 —— 1. Gradient 渐变

CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变参数: <linear-gradient> = linear-gradient( [<position>,] [<angle>,] <color-stop>[,<color-stop>]+ ); 设置线性渐变,我们至少要一个position或者angle来表示我们渐变的防线,同时还要设置两个颜色节点表示起始和终…

CSS gradient渐变之webkit核心浏览器下的使用以及实例

一.关于渐变渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色.渐变通过-webkit-gradient方法实现,可以用来代替图片URL.在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的.您还可以指定多个中间过渡色,此称之为color stops. 二.基本语法 we…

ie 9 渐变背景色兼容问题

/*窗口背景*/ .window { background-color: #fff; background: -webkit-linear-gradient(top,#EFF5FF 0,#fff 20%); background: -moz-linear-gradient(top,#EFF5FF 0,#fff 20%); background: -o-linear-gradient(top,#EFF5FF 0,#fff 20%); background: line…

gradient 渐变

看了大漠写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作为一个属性值来应用,比如用于background 背景.list-style-image 的属性值. linear-gradient 线性渐变语法:linear-gradient( [<point> || <angle>,] <stop>, <stop> [,…

CSS gradient渐变之webkit核心浏览器下的使用

一.关于渐变渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色.渐变通过-webkit-gradient方法实现,可以用来代替图片URL.在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的.您还可以指定多个中间过渡色,此称之为color stops. 二.基本语法 we…