• 技术文章 >web前端 >css教程

    兼容多浏览器的gradient写法详解

    零下一度零下一度2017-05-18 10:18:56原创1122
    兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景,下面是当前五大浏览器对 gradient 的支持 经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 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); 
    /* IE < 10 */ 
    /* 注意:这一行必须写在最后 */ 
    FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
    </style>

    代码如下:

    <p id="gradient"></p>

    啥时没有IE6,啥时世界算太平啊。万恶的IE。

    【相关推荐】

    1. 特别推荐“php程序员工具箱”V0.1版本下载

    2. 免费css在线视频教程

    3. php.cn独孤九贱(2)-css视频教程

    4. 深入了解CSS3渐变(Gradients)

    以上就是兼容多浏览器的gradient写法详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:兼容,gradient
    上一篇:深入了解CSS3渐变(Gradients) 下一篇:纯css3实现物流状态持续更新的实例代码
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• 12个值得收藏的 CSS 技巧!!• css3怎样实现翻转2次效果• css中圆角属性值能用百分比吗
    1/1

    PHP中文网