note

1.线性渐变：

background: -webkit-gradient(linear, 0 0, 100 100, from(yellow), to(blue));

/*渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))*/

2.文字倒影：

方法一： -webkit-box-reflect: below 1px -webkit-gradient(linear,0 20%,0 100%,from(transparent),color-stop(0, transparent),to(#000));

方法二： -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.3));

3.文本阴影：

text-shadow:5px 2px 6px #000;

4.动画过度：

img:hover{
-webkit-animation: 6s effect infinite;                  //forwards
  }
@-webkit-keyframes effect {
  10% { -webkit-transform:rotate(60deg);}
  20% { -webkit-transform:rotate(-120deg);}
  30% { -webkit-transform:rotate(180deg);}
  40% { -webkit-transform:rotate(-240deg);}
  50% { -webkit-transform:rotate(300deg);}
  100% { -webkit-transform:rotate(-360deg);}
  }

5.border-image

6.跑马灯

marquee

7.鼠标移动文本框提示内容消失

placeholder