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;
     
  • 相关阅读:
    iOS AutoLayout的用法
    UIPickerView的使用(一)
    UIPickerView的使用(二)
    logging模块
    configparser模块
    hashlib模块
    json & pickle 模块
    对表的操作
    表记录曾删改查
    库、表曾删改查和存储引擎
  • 原文地址:https://www.cnblogs.com/overstep/p/2599170.html
Copyright © 2011-2022 走看看