css3——阴影（立体感，层次效果），渐变色按钮

box-shadow: 0px 0px 12px #97eaf9;

语法

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊距离。
• spread 可选。阴影的尺寸。
• color 可选。阴影的颜色。
• inset 可选。将外部阴影 (outset) 改为内部阴影。

从上到下渐变

 background: -moz-linear-gradient(top, #34dbfc 0%, #61a7fd 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34dbfc), color-stop(100%,#61a7fd));
 background: -webkit-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -o-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -ms-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: linear-gradient(to bottom, #34dbfc 0%,#61a7fd 100%);

从左到右渐变

  background: -moz-linear-gradient(left, #00cbcc 0%, #009bcc 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00cbcc), color-stop(100%,#009bcc));
  background: -webkit-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: -o-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: -ms-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: linear-gradient(to right, #00cbcc 0%,#009bcc 100%);