css3

css3中 transform 属性：

webkit-transform:   for Chrome || Safari

-moz-transform:  for Firefox

-ms-transform:  for IE

-o-transform:  for Opera

  1. rotate(45deg)：顺时针旋转45度 

  2. scale(0.5)：缩小50%

  3. shew(30deg, 30deg)：水平方向上倾斜30度，垂直方向倾斜30度

  4. translate(50px, 50px)： 水平方向上移动（左）50px，垂直方向上（上）移动50px

css3中 box-shadow 属性：

-moz-box-shadow

-webkit-box-shadow

  1. x-offset：               x轴偏移（右）

  2. y-offset：               y轴偏移（下）

  3. blur：                     模糊值

  4. color of shadow：  阴影颜色

eg: -webkit-box-shadow: 1px 1px 3px blue;

       -webkit-box-shadow:  1px 1px 3px green, -1px -1px 3px blue;

gradient:

linear:线性渐变

-webkit-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>*]);
-moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]*);
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);
/**
point: left/top,right/bottom/left top/....
angle: 30deg/.....
stop: #ccc/#ccc 5%/...
*/

background: -webkit-linear-gradient(left, #ccc 5%, #000000 80%, #fff);
background: -moz-linear-gradient(left top 30deg, #ace 5%, #fff 30%, #f96);
background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), url(......));

radial:径向渐变

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
/**
bg-position: bottom left(x y)/......
angle: 30deg/...
shape: circle/eillpse
size: closest-side(最近端)/closest-corner(最近角)/farthest-side(最远端)/farthest-corner(最远角)/contain(包含)/cover(覆盖)
*/

重复渐变

background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);