day14（css3的滤镜 和 属于图片属性filter的属性值 以及 drop-shadow()与box-shadow的区别）

一.css滤镜

CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。
filter:属性值;

二.属性值（属于图片属性filter的属性值）
1.修改所有图片的颜色为黑色

	(100% 灰度)
	grayscale(100%)

2.设置高斯模糊

	单位为px，值越大越模糊
	blur(10px)

3.使其看起来更亮或更暗。

	如果值是0%，图像会全黑。值是100%，则图像无变化。可以超过100%;
	brightness(%)

4.调整图像的对比度

	contrast(%)
	值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

5.给图像应用色相旋转。

	hue-rotate(deg)
	值为0deg，则图像无变化。超过360deg的值相当于又绕一圈。

6.反转输入图像

	invert(%)
	值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。

7.转化图像的透明程度。

	opacity(%)
	值定义转换的比例。0%则是完全透明,100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

8.转换图像饱和度。

	saturate(%)
	0%则是完全不饱和，100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。效果跟grayscale好像

9.将图像转换为深褐色。

	sepia(%)
	100%则完全是深褐色的，0%图像无变化。最大值为100%

10.URL函数

	url函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
	url()

11图片阴影`

	drop-shadow(offset-x offset-y blur-radius spread-radius color)
	这个属性与box-shadow属性很像，但是它没有inset这个关键字，使用滤镜的这个属性，浏览器为了更好的性能提升会使用硬件加速，第一个值设置X轴的偏移程度，负数则是在图像的左边，第二个值则是设置Y轴的偏移程度，前两个值必填。第三个值是用来设置模糊程度，值越大越模糊，阴影越大，不允许设置负值。第四个值正数会使得阴影变大，负数使得阴影缩小 第五个颜色的值则是用来设定颜色

三.drop-shadow()与box-shadow的区别

box-shadow: inset offset-x offset-y blur-radius spread-radius color;
与
filter: drop-shadow(offset-x offset-y blur-radius color);

1）区别一 (box-shadow多了两个值）

1>第一个为inset，该值是用于控制阴影是向内还是向外的扩散，如果有写则表示阴影向内，默认不填则向外。
	box-shadow: inset 0px 0px 15px 0px #f00
2>第二个为spread-radius，该值是控制阴影的范围扩大或缩小，值越大阴影就越扩大，负值的时候收缩
	box-shadow: 0px 0px 15px 5px #f00

2)区别二 （box-shadow可以添加多个阴影）

box-shadow: 0rpx 0rpx 20rpx 30rpx rgba(12, 12, 12, 0.199),
inset 0rpx 0rpx 10rpx 10rpx rgba(12, 12, 12, .6);

（通过逗号添加第二组阴影）