css写阴影颜色渐变 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%);