zoukankan      html  css  js  c++  java
  • css 背景渐变,圆角,阴影用法与兼容

    #mydiv{width:30%;height:50%;min-height: 650px;float:left;border:1px solid white;
        /*以下为各大浏览器的渐变 背景*/
        /*webkit,如Chrome、Safari等*/  
        background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#b1d2eb), to(#8ec0e7));
        /*IE系列*/
        FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b1d2eb,endColorStr=#8ec0e7);
        /*Firefox*/
        background: -moz-linear-gradient(left, #b1d2eb, #8ec0e7) no-repeat;    
        /*Opera*/
        background: -o-linear-gradient(left, #b1d2eb 0%,#8ec0e7 100%); 
    }
    参数:
     
    IE系列
    filter:
    参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平
     
    Firefox
    参数:top、bottom垂直,left、right水平 例如:top时从顶部由#b1d2eb到#8ec0e7渐变,bottom时从底部由#b1d2eb到#8ec0e7渐变
     
    Opera
    参数:top、bottom垂直,left、right水平 例如:top时从顶部由#b1d2eb到#8ec0e7渐变,bottom时从底部由#b1d2eb到#8ec0e7渐变
     
    webkit,如Chrome、Safari等
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1d2eb), to(#8ec0e7));
     
    /*阴影*/
    box-shadow: 5px 5px 5px #61a5d5;  /*ie 9.0以上*/
    -moz-box-shadow: 5px 5px 5px #61a5d5; /*firefox*/ 
    -webkit-box-shadow: 5px 5px 5px #61a5d5;/*chrome等*/
    /*圆角,ie9.0以,IE8.0及以下可以用jquery插件解决*/
    border-radius:8px;
     
  • 相关阅读:
    行列式的六条运算法则整理
    李昊大佬的CV模板
    洛谷P2918 [USACO08NOV]买干草(一道完全背包模板题)
    .
    洛谷P2822 组合数问题
    欧拉筛法模板&&P3383 【模板】线性筛素数
    拓展欧几里得算法
    欧几里得算法求最大公约数模板
    P2678 跳石头
    【五一qbxt】test1
  • 原文地址:https://www.cnblogs.com/overstep/p/2599170.html
Copyright © 2011-2022 走看看