css3在工作中运用上的总结(圆角、内阴影、外阴影)

转自：http://www.html-5.cn/div-css/jishu/10239.html

//阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

阴影效果

-moz-box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);

内阴影

-moz-box-shadow: 5px 5px 5px #999 inset;
-webkit-box-shadow: 5px 5px 5px #999 inset;
box-shadow: 0px 0px 8px #dfdfdf inset;

内阴影和外阴影同时有阴影：

box-shadow: 0px 5px 8px #bbbbbb inset,0px 1px 0px #83d490;

box-shadow: 0px 0px 10px rgba(0,0,0,0.8) inset,0px 0px 5px rgba(200,200,200,0.5);

圆角：

-moz-border-radius: 1em;
-webkit-border-radius: 1em; border-radius: 1em;

渐变背景：

background-color: #04D426;

 

background-image: -webkit-gradient(linear,left top,left bottom,from(#0dbd2a),to(#05a51f));

background-image: -webkit-linear-gradient(#0dbd2a,#05a51f);

background-image: -moz-linear-gradient(#0dbd2a,#05a51f);

background-image: -ms-linear-gradient(#0dbd2a,#05a51f);

background-image: -o-linear-gradient(#0dbd2a,#05a51f);

background-image: linear-gradient(#0dbd2a,#05a51f);

 

兼容各浏览器 背景透明文字不透明的解决办法：其中
filter:progid:DXImageTransForm.Microsoft.gradient(startColorstr=#70000000,endColorstr=#70000000);

是解决ie各浏览器的办法，用background-color:#000\9不能达到想要的效果;
.map_summary{width:auto;height:39px;bottom:0;left:0;background-color: rgba(0, 0, 0, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000,endColorstr=#70000000);_background-color:#000; _filter: alpha(opacity=60); zoom: 1;padding:0px 50px;}