CSS3 的阴影（Shadow）和反射（Reflect）效果

阴影效果，阴影效果既可用于普通元素，也可用于文字，例如：

.class1{
 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
 }

 .class2{
 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
 }
阴影的设置相对简单，表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px, 而阴影模糊半径 6px，颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值，负值则反方向。元素阴影也类似。
但有时候我们有时候给文字设置阴影就显得单调了一些，因此我们可以用另外一个方法，就是反射效果，各位文字一个水平的线类似于水面的效果，让文字底部有一个水平反射，例：　　

.classReflect{
 -webkit-box-reflect: below 10px
 -webkit-gradient(linear, left top, left bottom, from(transparent),
      to(rgba(255, 255, 255, 0.51)));
 }

设置也很简单，主要关注”-webkit-box-reflect: below 10px”，他表示反射在元素下方 10px 的地方，再配上渐变效果，可见效果图如下：