3D动画和盒阴影及滤镜

1. 3D
   开辟异次元空间
   transform-style：preserve-3d;
   视距，透视
   perspective: npx;

2. 盒阴影
   必须要有的
   h-shadow 水平阴影
   v-shadow 垂直阴影
   可以选择的
   blur 模糊距离
   spread 阴影尺寸
   color 阴影颜色
   inset 内阴影

3. 文字阴影
   必须要有的
   h-shadow 水平阴影
   v-shadow 垂直阴影
   可以选择的
   blur 模糊距离
   color 阴影颜色

4. 滤镜属性
   亮度
   属性名称 ：
   filter：brightness（%）；
   0%全黑，超过100%会越来越亮
   该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用

   对比度
   属性名称：
   filter：contrast（百分比）；
   100%默认，0%全灰，超过100%对比越高
   所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白
   当元素只有一种颜色时，该属性看效果和变亮看上去差不多，如果我们给该元素设置一个背景图片的话，那就是另一回事了

   模糊
   属性名称：
   filter：blur（px）；
   高斯模糊，值越大越迷糊,不接受百分比 ；

   色调
   属性名称：灰色色阶
   filter：grayscale（%）；
   100%全灰，0%不变
   该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

   属性名称：褐色色阶
   	filter：sepia（%）；
   	100%完全深褐色，0%不变 
   	该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子
   

   滤镜
   filter: none;

   图片阴影
   filter: drop-shadow(h-shadow v-shadow blur spread color)
   注意：Webkit,以及一些其他的浏览器 不支持第四个长度，如果加了也不会渲染

   色相旋转
   filter: hue-rotate（deg）
   0deg没有变化，超过360deg相当于绕了一圈

   反传输入图像
   filter:invert(%)
   0%没有变化，100%完全反转

   透明度
   filter：opacity(%)
   0%完全透明，100%完全不透明

   饱和度
   filter：saturate(%)
   0%完全不饱和，100%没有变化，默认值1，超过100%有更高的饱和度

   url() XML 文件，文件里设置了SVG滤镜

   inherit,从父级继承

   复合写法，顺序会影响结果