css3(含ie9以下)
1.box-shadow
.element {
-moz-box-shadow: 2px 2px 10px #909090;/*兼容firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*兼容safari或chrome*/
box-shadow: 2px 2px 10px #909090;/*兼容opera或ie9*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*兼容ie*/
}
2.transition
.element {
-webkit-transition: background-color linear .8s;
-moz-transition: background-color linear .8s;
-o-transition: background-color linear .8s;
transition: background-color linear .8s;
}
3. border-radius
.element {
-webkit-border-radius: 10px 11px 12px 13px;
-moz-border-radius: 10px 11px 12px 13px;
border-radius: 10px 11px 12px 13px;
}
4.渐变
.element {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c));
background: -webkit-linear-gradient(left, #80c1e7, #213c7c);
background: -moz-linear-gradient(left, #80c1e7, #213c7c);
background: -o-linear-gradient(left, #80c1e7, #213c7c);
background: -ms-linear-gradient(left, #80c1e7, #213c7c);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c);
}
5.opacity
.element{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
6.background-size
//兼容ie8,需要引用backgroundsize.min.htc,自行百度
.element{
background: url(images/126.jpg) center no-repeat;
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);//相对路径
behavior: url(backgroundsize.min.htc);//相对路径
}
7. css3选择器nth-child()失效写法,举个栗子
ie9以上写法:
.demo p:nth-child(2)
ie8及以下写法:
.demo p+p