CSS3滤镜详解--兼容器问题解决
CSS3中提供滤镜的属性是：filter 他的值有
blur( <length> )：模糊值，默认值为0 越大月模糊
以下默认值为100%
brightness( [ <number（数值）> | <percentage（百分比）> ])：亮度
contrast( [ <number> | <percentage> ] )：对比度
saturate( [ <number> |<percentage> ] )：饱和度
grayscale( [ <number> |<percentage> ] )：灰度
opacity( [ <number> |<percentage> ] )：透明度
hue-rotate( <angle> )：色相旋转 默认值为：0deg
以下默认值为0
invert( [ <number> |<percentage> ] )：反色
sepia() = sepia([ <number> | <percentage> ] ):褐色
drop-shadow( <length>{2,3}：阴影 默认值为0
实例：
04galleryBegin.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例演示-滤镜使用</title>
<link rel="stylesheet" type="text/css" href="css/clolorChange.css"/>
<link rel="stylesheet" type="text/css" href="css/galleryBegin.css"/>
<script type="text/javascript" src="js/prefixfree.min.js" ></script>
</head>
<body>
<div class="cardfan">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
</div>
<script>
var polyfilter_scriptpath='js/lib/';
</script>
<!--解决兼容性问题-->
<script type="text/javascript" src="js/lib/contentloaded.js" ></script>
<script type="text/javascript" src="js/lib/css-filters-polyfill.js" ></script>
<script type="text/javascript" src="js/lib/cssParser.js" ></script>
</body>
</html>
/*设置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);
}