-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;behavior:url(border-radius.htc);
2、透明度
opacity:0.85; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* ie8 */ filter:alpha(opacity=85); /* ie5-7 */ -moz-opacity:0.85; /* old mozilla browser like netscape */ -khtml-opacity: 0.85;
3、图片放大
img {-moz-transform:scale(1.1, 1.1); -webkit-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
:hover img { -moz-transform:scale(1.1, 1.1); -webkit-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
4、溢出隐藏
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
5、水平位移特效
a {-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
a:hover {-webkit-transform:translateX(10px); -moz-transform:translateX(10px); transform:translateX(10px);}
6、渐变
transition:400ms
7、阴影特效
-moz-box-shadow:2px 4px 8px #7A5215; -webkit-box-shadow:2px 4px 8px #7A5215; box-shadow:2px 4px 8px #7A5215;
2代表水平阴影 4代表是垂直阴影 8模糊度 #7A5215阴影颜色
8、文本阴影
text-shadow:2px 2px 5px #333333;
9、一般兼容性
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
10、css3响应式代码
@media screen and (max-width:1200px){
.logo { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: 0px;}
}//当宽度小于1200时显示
@media screen and (min-width:1200px){
.logo { float: left; padding-top: 10px; padding-bottom: 10px; padding-left: 0px;}
}//当宽度大于1200时显示
文章点评