兼容当前五大浏览器的渐变颜色背景gradient的写法
2014-08-08 10:25
591 查看
经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。
下面是当前五大浏览器对 gradient 的支持
啥时没有IE6,啥时世界算太平啊。万恶的IE。
下面是当前五大浏览器对 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%, 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);} </style>
<div id="gradient"></div>
啥时没有IE6,啥时世界算太平啊。万恶的IE。
相关文章推荐
- 兼容主流浏览器的渐变颜色背景gradient的写法
- css控制背景颜色渐变以及浏览器的兼容写法(转载别人的)
- css中background:-webkit-gradient实现背景渐变效果,并且兼容各个浏览器
- CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
- css3背景渐变颜色linear-gradient(IE兼容)
- Css背景颜色渐变,j兼容多浏览器 IE6、IE7、IE8、FF、Opera、Chorme、Safari
- 兼容多种浏览器的渐变颜色背景
- div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
- 兼容所有浏览器的半透明背景且不透明文字的CSS写法
- 兼容所有浏览器的半透明背景且不透明文字的CSS写法
- CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)
- 兼容IE6,IE7,IE8,friefox,chreom浏览器圆角及颜色渐变效果
- div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
- js基础--获取浏览器当前页面的滚动条高度的兼容写法
- CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐 谷歌浏览器)
- CSS-背景渐变的兼容写法
- 实现兼容各浏览器的背景渐变,透明度渐变,色彩渐变
- css3背景渐变 兼容ie和其它浏览器
- 浏览器实现颜色渐变效果(兼容)
- 兼容各个浏览器css背景颜色半透明