zoukankan      html  css  js  c++  java
  • CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码:

    .gradient{
        300px;
        height:150px;
        filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8浏览器下的渐变背景*/	
        background:red; /* 一些不支持背景渐变的浏览器 */  
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  /* Firefox浏览器下的渐变背景 */
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  /* chrome/Safari浏览器下的渐变背景实现 */
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /* Opera浏览器下的渐变背景 */
    }
    
    <div class="gradient"></div>

    实现的效果如下图:



    具体的使用说明可查看张鑫旭博客地址:http://www.zhangxinxu.com/wordpress/?p=743



  • 相关阅读:
    转 vue动画总结
    html常用字体
    GIT常用命令
    h5 编辑单选框的样式
    转载 配置vue项目
    npm audit fix 报错
    mysql驱动包
    vue仿移动端输入框
    vue过渡动画样式
    解读Scrapy框架
  • 原文地址:https://www.cnblogs.com/sese/p/4721458.html
Copyright © 2011-2022 走看看