html学习笔记（二）
滤镜
一般用CSS filter属性来实现滤镜效果
1.使用范围：主要是应用在图片上，实现一些特效。
2.常用属性（默认值是：none）
（1） grayscale（设置灰度，1和默认是百分之百，0是百分之零）
（在body里面插入一张图片然后给图片设置滤镜效果）
代码如下（示例）：
.img{
width: 400px;
height: 400px;
-webkit-filter: grayscale(1);
}
网页效果
（2）.sepia褐色（使用这个属性可以将图片做旧，同时，sepia没有参数值，将以百分之百渲染）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
-webkit-filter: sepia();
}
网页效果
（3）.saturate饱和度(saturat是用来改变图片的饱和度，默认值是百分之百）
代码如下（示例）
.img{
width: 300px;
height: 300px;
-webkit-filter: saturate(0.5);
}
网页效果
饱和度为百分之五十
（4）.invert反色（胶片底色，默认值为百分之百）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
-webkit-filter: invert();
}
网页效果
（此为默认值百分之百）
（5）.hue-rotate色相旋转（hue-rotate用来改变图片的色相 默认值：0deg）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
filter: hue-rotate(90deg);
}
网页效果
（6）、opacity透明度（改变图片的透明度，默认值：100%）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
filter: opacity(0.3);
}
网页效果（透明度为百分之三十）
（7）、brightness亮度（改变图片的亮度，默认值：100％）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
filter: brightness(0.3);
}
网页效果（亮度为百分之三十）
（8）、 contrast对比度（改变图片的对比度，默认值：100％）
代码如下（示例）：
.img{
width: 300px;
height: 300px;
filter: contrast(0.3);
}
网页效果（设置为透明度百分之三十）
（9）.blur模糊(改变图片的清晰度，默认值：0)
代码如下（示例）：
.img{
width: 300px;
height: 300px;
filter: blur(1px);
}
网页效果
（10）. drop-shadow阴影（像box-shadow一样的效果，给图片加阴影效果， 写法:drop-shadow(5px 5px 5px #ccc);）
.img{
width: 300px;
height: 300px;
filter: drop-shadow(8px 8px 6px #333);
}
网页效果
