css3常用代码整理

1.圆角

.rd10{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px; -ms-border-radius:10px;}
.rd5{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; -khtml-border-radius: 5px;-ms-border-radius:5px;}
.roundtl{-moz-border-top-left-radius:5px;-webkit-border-top-left-radius:5px; -khtml-border-top-left-radius:5px;-ms-border-top-left-radius:5px;}
.roundtr{-moz-border-top-right-radius:5px;-webkit-border-top-right-radius:5px; -khtml-border-top-right-radius:5px;-ms-border-top-right-radius:5px;}
.roundbl{-moz-border-bottom-left-radius:5px;-webkit-border-bottom-left-radius:5px; -khtml-border-bottom-left-radius:5px;-ms-border-bottom-left-radius:5px;}
.roundbr{-moz-border-bottom-right-radius:5px;-webkit-border-bottom-right-radius:5px; -khtml-border-bottom-right-radius:5px;-ms-border-bottom-right-radius:5px;}

2.阴影

.shadow{box-shadow: 0px 3px 3px #000;-moz-box-shadow: 0px 3px 3px #000;-webkit-box-shadow: 0px 3px 3px #000;}
.shadow{box-shadow:0px 0px 18px rgba(0,0,0,.4);-moz-box-shadow: 0px 0px 18px rgba(0,0,0,.4);-webkit-box-shadow: 0px 0px 18px rgba(0,0,0,.4);}

.shadow{-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);}

3.transition

-webkit-transition: all ease 1s;-moz-transition:all ease 1s;-o-transition:all ease 1s;transition: all ease 1s

4.transform

-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2); -transform:scale(1.2,1.2);
-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)

5.透明度

.transparent {filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;}

6.按钮样式

.btn {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0px;
  box-shadow: none;
  color: #fff;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.4s ease-in;
}
.btn:hover {
  background: #009988;
  border-color: transparent;
}