经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景 。
下面是当前五大浏览器对 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);
/* IE10 */
/* 注意:这一行必须写在最后 */
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}
/style
复制代码代码如下:
div id="gradient"/div
啥时没有IE6,啥时世界算太平啊 。万恶的IE 。
推荐阅读
- 解决win8.1rtm版IE11兼容性问题导致很多网站认为IE11是firefox
- 完美解决在win8.1系统中IE11浏览器兼容性的问题
- IE11兼容网银怎么设置 IE11浏览器网银不能使用解决方法图解
- 用Win8.1组策略恢复IE11原本的网页兼容能力
- 鸿蒙3.0兼容安卓应用吗
- IE6与CSS样式兼容问题汇总
- 浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1
- 浏览器兼容之旅第四站:IE常见Bug总结及修复方法—part2
- 多种方法解决min-width 不兼容ie6的问题
- IE6中的position:fixed定位兼容性写法分享
