文字阴影、背景缩放和渐变、多背景、盒子半透明、3D变形

1.文字阴影：text-shadow:h-shadow  v-shadow  blur  color;

2.背景缩放

手机端的精灵图是2倍的，放到背景中需要进行缩放。CSS3中用background-size:宽 高;可以调整图片缩放（如果只设置一个值，第二个值为auto）。也可以用cover（等比例缩放，铺满后多余的会超出不显示）或contain（自动缩放，最大的那条边到了就结束）来修改。

3.背景渐变

案例1：background:-webkit-linear-gradient;（渐变的起始位置，起始颜色，结束颜色）

background:-webkit-linear-gradient(top,red,yellow);

案例2：background:-webkit-linear-gradient;（渐变的起始位置，颜色  位置，颜色  位置...）

background:-webkit-linear-gradient(top,red 0%,yellow 50%,blue 100%);

4.多背景用“,”号隔开（注意，多背景时，颜色写在下面，防止被叠加）
background:url() no-repeat top left,url() no-repeat bottom right;

5.盒子半透明

盒子的背景半透明，文字不会透明：background:ragb(255,0,0,.2);

盒子的背景半透明，文字也会透明：opacity：0.2;

6.优雅降级和渐进增强根据客户需求来处理

优雅降级：高版本做完再来调整兼容性

渐进增强：低版本做完再来增加效果

7.3D变形 transform

2d  x  y   

沿着X轴旋转180度，transform：rotateX(180deg);

沿着Y轴旋转180度，transform：rotateY(180deg);

3d  x  y  z  左手坐标系

沿着X、Y、Z轴旋转，transform：rotateX(180deg) rotateY(180deg) rotateZ(180deg) skew(0,10deg);

 8.backface-visibility:hidden; 属性定义当元素背面向屏幕展示时，是否可见。（visible可见）