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%);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！