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;