CSS3滤镜详解--兼容器问题解决

CSS3中提供滤镜的属性是：filter  他的值有 

blur( )：模糊值，默认值为0 越大月模糊

以下默认值为100%

brightness( [  |  ])：亮度

contrast( [ | ] )：对比度

saturate( [ | ] )：饱和度

grayscale( [ | ] )：灰度

opacity( [ | ] )：透明度

 hue-rotate( )：色相旋转  默认值为：0deg

以下默认值为0

 invert( [ | ] )：反色

sepia() = sepia([  |  ] ):褐色

drop-shadow( {2,3}：阴影 默认值为0

实例：

04galleryBegin.html：

galleryBegin.CSS:

/*设置div的宽度 外边距 位置*/
.cardfan{
width: 30%;
margin: 4em auto;
position: relative;
}


/*设置图片的样式*/
.cardfan img{
position: absolute;
width: 100%;
height: auto;
/*边框*/
border: 10px solid #fff;
/*阴影上 右 左 下*/ 
box-shadow: 2px 2px 4px 0 rgba(0,0,0,2);
/*旋转图片的基点位置*/
transform-origin: center 600px; 
/*transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。*/
transition: all .5s;
/*一些不同的光标：*/
cursor: pointer;
}
/*第一张图片正常情况下设置*/
.cardfan img:nth-child(1){
transform: rotate(-10deg);
z-index: 3;
/*灰度 0为正常 1位灰色*/
filter: grayscale(1);
}
/*第一张图片触摸情况下设置*/
.cardfan img:nth-child(1):hover{
transform: rotate(-25deg);
filter: grayscale(0);
}
.cardfan img:nth-child(2){
filter:sepia(1);
}
.cardfan img:nth-child(2):hover{
filter:sepia(0);
}
.cardfan img:nth-child(3){
transform: rotate(10deg);
z-index: -1;
filter: blur(3px);
}
.cardfan img:nth-child(3):hover{
transform: rotate(25deg);
filter: blur(0);
}