http://www.css3maker.com/

http://www.css3.me/

http://caniuse.com/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Css3 - 文本效果</title>
  <style>
    body
    {
      font-size:50px;
      text-shadow: 5px 5px 1px rgba(0,0,0,.7);
    }
  </style>
</head>
<body>
  Hello World!
</body>
</html>

http://www.cnblogs.com/CyLee/p/5333518.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Css3 - 渐变效果</title>
  <style>
    div
    {
     width: 500px;
     height: 200px;
     color:#fff;
     /*background-image: linear-gradient(to left top ,yellow,black);*/
     /*background-image: linear-gradient(45deg,yellow,black);*/
     /*background-image: linear-gradient(-45deg,yellow,black);*/
     /*background-image: repeating-linear-gradient(rgba(0,0,0,1) 10px,rgba(255,255,255,1) 30px);*/
     background-image: linear-gradient(-45deg ,yellow 0%,black,blue,rgba(255,255,255,1) 100%);
    }
  </style>
</head>
<body>
  <div>黑色从左上到右下渐变,可以设置top,right,bottom,left。还可以设置0~360deg（度）.还可以书写N个颜色，颜色可以分配占比重（%或者Px）、默认从开头为0%、结尾100%，中间如果不设置会自动计算。
  并且这些颜色还可以使用rgba来实现强大的层次感。还可以使用repeating实现重复背景类似百叶窗的效果
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Css3 - 渐变效果</title>
  <style>
    div
    {
      width: 500px; height: 200px; color:#fff; background: green;
      /*transform:translate(100px,200px);*/
      /*transform:scale(1.5,0.5);*/
      /*transform:rotate(4deg);*/
      /*transform:skew(4deg,10deg);*/
      transform:translate(200px,100px) rotate(4deg) scale(1.5) skew(4deg,4deg);
    }
  </style>
</head>
<body>
  <div>
   transform对应几个函数：
   1、translate（x,y） 平移
   2、scale（x,y） 对x轴和y轴进行倍数扩大或者缩小
   3、rotate(deg)  以中心为轴旋转n角度，比较常用的效果
   5、skew(xdeg,ydeg) 倾斜，有点立体感，类似投影仪
   以上功能都可以通过空一格组合使用，如
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Css3 - 渐变效果</title>
  <style>
    div
    {
      width: 200px; height: 200px; color:#fff; background: green;
       transform: translate(150px,100px) rotate(45deg);
       transform-origin: 0px 0px;
       /*transform-origin: left top;*/
    }
  </style>
</head>
<body>
  <div>
   transform-origin
   可以设置transform的基准点，可以设置px,%,还有位置
  </div>
</body>
</html>