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;