兼容主流浏览器的渐变颜色背景gradient的写法

/* Webkit: Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0%
0%, 0% 100%, from(#ff6600), to(#339900));

/* Webkit: Safari 5.1+, Chrome 10+
*/
background: -webkit-linear-gradient(top, #ff6600, #339900);

/*
Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6600, #339900);

/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6600,
#339900);

/* IE 10 */
background: -ms-linear-gradient(top, #ff6600,
#339900);

/* IE < 10 */
/* 注意:这一行必须写在最后 */
FILTER:
progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600,
endColorStr=#339900);

时间: 2024-11-05 18:49:45

兼容主流浏览器的渐变颜色背景gradient的写法的相关文章

兼容当前五大浏览器的渐变颜色背景gradient的写法

<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, fr

兼容多种浏览器的渐变颜色背景

经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对 gradient 的支持 Css代码   <style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ backg

css 渐变颜色背景gradient 浏览器兼容

兼容当前五大浏览器的渐变颜色背景gradient的写法<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient

(转)兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5

加入收藏兼容主流浏览器代码

//加入收藏 function AddFavorite(){ if (document.all) { addToBookMark(window.location.href, document.title); } else if (window.sidebar) { addToBookMark(document.title, window.location.href); } } function addToBookMark(url,title){ var ua = navigator.userAg

兼容主流浏览器的CSS透明代码

收集一个兼容主流浏览器的透明CSS代码 filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;

将内容复制到剪切板兼容主流浏览器的解决方案

html : <body> <div class="demo-area"> <label for="copy-input">输入要复制到剪切板的文字:</label><br> <textarea id="copy-input" cols="30" rows="10"></textarea><br> <but

IE浏览器和主流浏览器对css样式背景透明,字体不透明的处理方法

刚学习了css兼容性问题,兼容性问题是我们前端开发者必须要跨越的一道鸿沟,对于不同浏览器,我们都要考虑其兼容性,代码的可操作性,因为同一段代码可能在谷歌和火狐等等主流浏览器上显示是正常的,但是在IE浏览器上却显示的很怪异,尤其以IE6为主要照顾对象. 其他不多说,这里如标题所写的一样,我主要是解决css里实现背景透明而文字不透明的方法,经测试,自己写的代码在IE和非IE浏览器上都能正常显示,有代码不足之处,让大家指正,大家的努力才能创造我们web前端的明天. 在非IE浏览器下要实现背景和字体一起

javascript创建css、js,onload触发callback兼容主流浏览器的实现

http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.css后是否触发onload事件做了个测试.当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他们并不是万能的.加载js文件onload触发callback不算大问题.css比较特殊,因为Webkeit/FF下加载css不会触发onload事件.所以研究了一晚上