html5作图片按钮
日期：2014-05-17 浏览次数：20745 次
html5做图片按钮
?
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Just some other awesome CSS3 buttons - demo</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| body | |
| { | |
| margin: 0; | |
| text-align: center; | |
| } | |
| h2 | |
| { | |
| font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial; | |
| color: #555; | |
| } | |
| .button | |
| { | |
| display: inline-block; | |
| white-space: nowrap; | |
| background-color: #ddd; | |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));/****渐变 采用直线渐变 从左到顶，再到下****/ | |
| background-image: -webkit-linear-gradient(top, #eee, #ccc); | |
| background-image: -moz-linear-gradient(top, #eee, #ccc); | |
| background-image: -ms-linear-gradient(top, #eee, #ccc); | |
| background-image: -o-linear-gradient(top, #eee, #ccc); | |
| background-image: linear-gradient(top, #eee, #ccc); | |
| border: 1px solid #777; | |
| padding: 0 1.5em; | |
| margin: 0.5em; | |
| font: bold 1em/2em Arial, Helvetica; | |
| text-decoration: none; | |
| color: #333; | |
| text-shadow: 0 1px 0 rgba(255,255,255,.8); | |
| -moz-border-radius: .2em;/*****边框的圆角设置****/ | |
| -webkit-border-radius: .2em; | |
| border-radius: .2em; | |
| -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);/**这个很重要 inset**/ | |
| -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); | |
| box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); | |
| } | |
| .button:hover | |
| { | |
| background-color: #eee; | |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); | |
| background-image: -webkit-linear-gradient(top, #fafafa, #ddd); | |
| background-image: -moz-linear-gradient(top, #fafafa, #ddd); | |
| background-image: -ms-linear-gradient(top, #fafafa, #ddd); | |
| background-image: -o-linear-gradient(top, #fafafa, #ddd); | |
| background-image: linear-gradient(top, #fafafa, #ddd); | |
| } | |
| .button:active | |
| { | |
| -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) i
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
