css3 阴影box-shadow transition渐变 transform变换

       在工作中，经常要写一点小动画，这时候用jquery的动画麻烦，用css3的animate太复杂，而且兼容不好，这个时候，用点css3的小特性，就很方便了，代码也少，效果还是棒棒的！

   1.1    首先使用的是box-shadow，css3属性，阴影。box-shadow的兼容性是IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。基本在工作中都能用到，下面来看看属性：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow: 必需。水平阴影的位置。允许负值。

v-shadow:必需。垂直阴影的位置。允许负值。

blur: 可选。模糊距离。

spread: 可选。阴影的尺寸。

color:可选。阴影的颜色。

inset: 可选。将外部阴影 (outset) 改为内部阴影。

在实际的工作中，可能遇到要四周阴影的，这个时候就要一个小技巧：

将h-shadow和v-shadow设置为0，这个时候要设置模糊距离了，不然就没有阴影

  1.2     下面介绍的是transition和transform。为什么给这两个一起介绍，因为在使用的过程中，基本都是结合在一起使用，很少分开。

transition兼容性：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

  兼容到ie10。所以在使用的时候就要注意了，在特点的场合就放弃吧。

transition: property duration timing-function delay;

transition-property: 规定设置过渡效果的 CSS 属性的名称。(一般都使用all,这样就在使用多个渐变属性时，不要多次添加)

transition-duration : 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function: 规定速度效果的速度曲线。

transition-delay: 定义过渡效果何时开始。(也就是延时执行)

1.3 transform :

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

今天主要说的是2D转换，3D以后再议。

transform的属性比较其上两个就多了很多了，有十几个，包括2D和3D转换。

（图片引自w3school）