<div class="demo" style="width: 760px; margin: 20px auto 0px; height: 70px; font-family: Simsun;font-size:14px;"><a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button blue" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165)));">蓝色</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button blue bigrounded" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 2em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165)));">Rounded</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button blue medium" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 12px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.4em 1.5em 0.42em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165)));">Medium</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button blue small" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 11px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.2em 1em 0.275em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165)));">Small</a> <input class="button blue" type="button" value="Input Element" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;" /> <button class="button blue" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(217, 238, 247); border: 1px solid rgb(0, 118, 163); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 173, 238)), to(rgb(0, 120, 165))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Button Tag</button></div><div class="demo" style="width: 760px; margin: 20px auto 0px; height: 70px; font-family: Simsun;font-size:14px;"><a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button green" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14)));">绿色</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button green bigrounded" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 2em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14)));">Rounded</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button green medium" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 12px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.4em 1.5em 0.42em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14)));">Medium</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button green small" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 11px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.2em 1em 0.275em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14)));">Small</a> <input class="button green" type="button" value="Input Element" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;" /> <button class="button green" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(232, 240, 222); border: 1px solid rgb(83, 131, 18); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Button Tag</button></div><div class="demo" style="width: 760px; margin: 20px auto 0px; height: 70px; font-family: Simsun;font-size:14px;"><a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button white" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237)));">灰白</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button white bigrounded" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 2em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237)));">Rounded</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button white medium" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 12px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.4em 1.5em 0.42em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237)));">Medium</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button white small" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 11px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.2em 1em 0.275em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237)));">Small</a> <input class="button white" type="button" value="Input Element" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;" /> <button class="button white" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(96, 96, 96); border: 1px solid rgb(183, 183, 183); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(237, 237, 237))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Button Tag</button></div><div class="demo" style="width: 760px; margin: 20px auto 0px; height: 70px; font-family: Simsun;font-size:14px;"><a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button orange" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32)));">橘红</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button orange bigrounded" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 2em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32)));">Rounded</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button orange medium" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 12px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.4em 1.5em 0.42em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32)));">Medium</a> <a target=_blank href="http://www.html5tricks.com/demo/pure-css3-rounded-button/index.html#" class="button orange small" style="display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font-stretch: normal; font-size: 11px; line-height: 12px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.2em 1em 0.275em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32)));">Small</a> <input class="button orange" type="button" value="Input Element" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;" /> <button class="button orange" style="outline: none; cursor: pointer; font-stretch: normal; font-size: 16px; line-height: 16px; font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; padding: 0.5em 2em 0.55em; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: rgb(254, 244, 233); border: 1px solid rgb(218, 124, 12); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32))); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Button Tag</button></div>
<html><head> <meta charset="utf-8"> <title>漂亮的CSS3圆角按钮组合DEMO演示</title> <style type="text/css"> .demo{width:760px; margin:20px auto 0 auto; height:70px;} .button { <span style="white-space:pre"> </span>display: inline-block; <span style="white-space:pre"> </span>outline: none; <span style="white-space:pre"> </span>cursor: pointer; <span style="white-space:pre"> </span>text-align: center; <span style="white-space:pre"> </span>text-decoration: none; <span style="white-space:pre"> </span>font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif; <span style="white-space:pre"> </span>padding: .5em 2em .55em; <span style="white-space:pre"> </span>text-shadow: 0 1px 1px rgba(0,0,0,.3); <span style="white-space:pre"> </span>-webkit-border-radius: .5em; <span style="white-space:pre"> </span>-moz-border-radius: .5em; <span style="white-space:pre"> </span>border-radius: .5em; <span style="white-space:pre"> </span>-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); <span style="white-space:pre"> </span>-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); <span style="white-space:pre"> </span>box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { <span style="white-space:pre"> </span>text-decoration: none; } .button:active { <span style="white-space:pre"> </span>position: relative; <span style="white-space:pre"> </span>top: 1px; } .bigrounded { <span style="white-space:pre"> </span>-webkit-border-radius: 2em; <span style="white-space:pre"> </span>-moz-border-radius: 2em; <span style="white-space:pre"> </span>border-radius: 2em; } .medium { <span style="white-space:pre"> </span>font-size: 12px; <span style="white-space:pre"> </span>padding: .4em 1.5em .42em; } .small { <span style="white-space:pre"> </span>font-size: 11px; <span style="white-space:pre"> </span>padding: .2em 1em .275em; } /* blue */ .blue { <span style="white-space:pre"> </span>color: #d9eef7; <span style="white-space:pre"> </span>border: solid 1px #0076a3; <span style="white-space:pre"> </span>background: #0095cd; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #00adee, #0078a5); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); } .blue:hover { <span style="white-space:pre"> </span>background: #007ead; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #0095cc, #00678e); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); } .blue:active { <span style="white-space:pre"> </span>color: #80bed6; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #0078a5, #00adee); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); } /* green */ .green { <span style="white-space:pre"> </span>color: #e8f0de; <span style="white-space:pre"> </span>border: solid 1px #538312; <span style="white-space:pre"> </span>background: #64991e; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #7db72f, #4e7d0e); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); } .green:hover { <span style="white-space:pre"> </span>background: #538018; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #6b9d28, #436b0c); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); } .green:active { <span style="white-space:pre"> </span>color: #a9c08c; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #4e7d0e, #7db72f); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f'); } /* white */ .white { <span style="white-space:pre"> </span>color: #606060; <span style="white-space:pre"> </span>border: solid 1px #b7b7b7; <span style="white-space:pre"> </span>background: #fff; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #fff, #ededed); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); } .white:hover { <span style="white-space:pre"> </span>background: #ededed; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #fff, #dcdcdc); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); } .white:active { <span style="white-space:pre"> </span>color: #999; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #ededed, #fff); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); } /* orange */ .orange { <span style="white-space:pre"> </span>color: #fef4e9; <span style="white-space:pre"> </span>border: solid 1px #da7c0c; <span style="white-space:pre"> </span>background: #f78d1d; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #faa51a, #f47a20); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover { <span style="white-space:pre"> </span>background: #f47c20; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #f88e11, #f06015); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { <span style="white-space:pre"> </span>color: #fcd3a5; <span style="white-space:pre"> </span>background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); <span style="white-space:pre"> </span>background: -moz-linear-gradient(top, #f47a20, #faa51a); <span style="white-space:pre"> </span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); } </style> <style type="text/css" adt="123"></style><script>if(!document.URL.match(/^http:\/\/v\.baidu\.com|http:\/\/music\.baidu\.com|http:\/\/dnf\.duowan\.com|http:\/\/bbs\.duowan\.com|http:\/\/newgame\.duowan\.com|http:\/\/my\.tv\.sohu\.com/)){ (function() { Function.prototype.bind = function() { var fn = this, args = Array.prototype.slice.call(arguments), obj = args.shift(); return function() { return fn.apply(obj, args.concat(Array.prototype.slice.call(arguments))); }; }; function A() {} A.prototype = { rules: { /*'youku_loader': { 'find': /^http:\/\/static\.youku\.com\/.*(loader|player_.*)(_taobao)?\.swf/, 'replace': 'http://swf.adtchrome.com/loader.swf' }, 'youku_out': { 'find': /^http:\/\/player\.youku\.com\/player\.php\/.*sid\/(.*)/, 'replace': 'http://swf.adtchrome.com/loader.swf?VideoIDS=$1' },*/ 'pps_pps': { 'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/pps_flvplay_s\.swf/, 'replace': 'http://swf.adtchrome.com/pps_20140420.swf' }, /*'iqiyi_1': { 'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/.+\.swf$/, 'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf' }, 'iqiyi_2': { 'find': /^http:\/\/www\.iqiyi\.com\/common\/flashplayer\/\d+\/.+\.swf$/, 'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf' },*/ 'ku6': { 'find': /^http:\/\/player\.ku6cdn\.com\/default\/.*\/\d+\/(v|player|loader)\.swf/, 'replace': 'http://swf.adtchrome.com/ku6_20140420.swf' }, 'ku6_topic': { 'find': /^http:\/\/player\.ku6\.com\/inside\/(.*)\/v\.swf/, 'replace': 'http://swf.adtchrome.com/ku6_20140420.swf?vid=$1' }, 'sohu': { 'find': /^http:\/\/tv\.sohu\.com\/upload\/swf(\/p2p)?\/\d+\/Main\.swf/, 'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf' }, 'sohu2':{ 'find':/^http:\/\/[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\/testplayer\/Main0?\.swf/, 'replace':'http://www.adtchrome.com/sohu/sohu_20150104.swf' }, 'sohu_share': { 'find': /^http:\/\/share\.vrs\.sohu\.com\/my\/v\.swf&/, 'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf?' }, 'sohu_sogou' : { 'find': /^http:\/\/share\.vrs\.sohu\.com\/(\d+)\/v\.swf/, 'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf?vid=$1' }, /*'letv': { 'find': /^http:\/\/player\.letvcdn\.com\/.*p\/.*\/newplayer\/LetvPlayer\.swf/, 'replace': 'http://swf.adtchrome.com/20150110_letv.swf' }, 'letv_topic': { 'find': /^http:\/\/player\.hz\.letv\.com\/hzplayer\.swf\/v_list=zhuanti/, 'replace': 'http://swf.adtchrome.com/20150110_letv.swf' }, 'letv_duowan': { 'find': /^http:\/\/assets\.dwstatic\.com\/video\/vpp\.swf/, 'replace': 'http://yuntv.letv.com/bcloud.swf' },*/ '17173_in':{ 'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/, 'replace':"http://swf.adtchrome.com/17173_in_20150522.swf" }, '17173_out':{ 'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/, 'replace':"http://swf.adtchrome.com/17173_out_20150522.swf" }, '17173_live':{ 'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/, 'replace':"http://swf.adtchrome.com/17173_stream_20150522.swf" }, '17173_live_out':{ 'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/, 'replace':"http://swf.adtchrome.com/17173.out.Live.swf" } }, _done: null, get done() { if(!this._done) { this._done = new Array(); } return this._done; }, addAnimations: function() { var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = 'object,embed{\ -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\ -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\ -o-animation-duration:.001s;-o-animation-name:playerInserted;\ animation-duration:.001s;animation-name:playerInserted;}\ @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\ @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\ @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\ @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}'; document.getElementsByTagName('head')[0].appendChild(style); }, animationsHandler: function(e) { if(e.animationName === 'playerInserted') { this.replace(e.target); } }, replace: function(elem) { if(this.done.indexOf(elem) != -1) return; this.done.push(elem); var player = elem.data || elem.src; if(!player) return; var i, find, replace = false; for(i in this.rules) { find = this.rules[i]['find']; if(find.test(player)) { replace = this.rules[i]['replace']; if('function' === typeof this.rules[i]['preHandle']) { this.rules[i]['preHandle'].bind(this, elem, find, replace, player)(); }else{ this.reallyReplace.bind(this, elem, find, replace)(); } break; } } }, reallyReplace: function(elem, find, replace) { elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block')); var b = elem.querySelector("param[name='movie']"); this.reloadPlugin(elem); }, reloadPlugin: function(elem) { var nextSibling = elem.nextSibling; var parentNode = elem.parentNode; parentNode.removeChild(elem); var newElem = elem.cloneNode(true); this.done.push(newElem); if(nextSibling) { parentNode.insertBefore(newElem, nextSibling); } else { parentNode.appendChild(newElem); } }, init: function() { var desc = navigator.mimeTypes['application/x-shockwave-flash'].description.toLowerCase(); /*if(desc.indexOf('adobe')>-1){ delete this.rules["iqiyi_1"]; delete this.rules["iqiyi_2"]; }*/ if(document.URL.indexOf('tv.sohu.com')<=0){ delete this.rules["sohu"]; } var handler = this.animationsHandler.bind(this); document.body.addEventListener('webkitAnimationStart', handler, false); document.body.addEventListener('msAnimationStart', handler, false); document.body.addEventListener('oAnimationStart', handler, false); document.body.addEventListener('animationstart', handler, false); this.addAnimations(); } }; new A().init(); })(); } // 20140730 (function cnbeta() { if (document.URL.indexOf('cnbeta.com') >= 0) { var elms = document.body.querySelectorAll("p>embed"); Array.prototype.forEach.call(elms, function(elm) { elm.style.marginLeft = "0px"; }); } })(); // 20150108 setTimeout(function(){ if (document.URL.indexOf('www.baidu.com') >= 0) { var a = function(){ Array.prototype.forEach.call(document.body.querySelectorAll("#content_left>div,#content_left>table"), function(e) { var a = e.getAttribute("style"); if(a && /display:(table|block)\s!important/.test(a)){ e.removeAttribute("style") } }); }; a(); document.getElementById("su").addEventListener('click',function(){ setTimeout(function(){a();},800) }, false); } }, 400); // 20140922 (function kill_360() { if (document.URL.indexOf('so.com') >= 0) { document.getElementById("e_idea_pp").style.display = none; } })(); </script><style type="text/css">object,embed{ -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted; -ms-animation-duration:.001s;-ms-animation-name:playerInserted; -o-animation-duration:.001s;-o-animation-name:playerInserted; animation-duration:.001s;animation-name:playerInserted;} @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}} @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}</style><script></script></head> <body> <div id="main"> <div class="demo"> <span style="white-space:pre"> </span><a href="#" class="button blue">蓝色</a> <span style="white-space:pre"> </span><a href="#" class="button blue bigrounded">Rounded</a> <span style="white-space:pre"> </span><a href="#" class="button blue medium">Medium</a> <span style="white-space:pre"> </span><a href="#" class="button blue small">Small</a> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><input class="button blue" type="button" value="Input Element"> <span style="white-space:pre"> </span><button class="button blue">Button Tag</button> <span style="white-space:pre"> </span></div> <div class="demo"> <span style="white-space:pre"> </span><a href="#" class="button green">绿色</a> <span style="white-space:pre"> </span><a href="#" class="button green bigrounded">Rounded</a> <span style="white-space:pre"> </span><a href="#" class="button green medium">Medium</a> <span style="white-space:pre"> </span><a href="#" class="button green small">Small</a> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><input class="button green" type="button" value="Input Element"> <span style="white-space:pre"> </span><button class="button green">Button Tag</button> <span style="white-space:pre"> </span></div> <div class="demo"> <span style="white-space:pre"> </span><a href="#" class="button white">灰白</a> <span style="white-space:pre"> </span><a href="#" class="button white bigrounded">Rounded</a> <span style="white-space:pre"> </span><a href="#" class="button white medium">Medium</a> <span style="white-space:pre"> </span><a href="#" class="button white small">Small</a> <span style="white-space:pre"> </span><input class="button white" type="button" value="Input Element"> <span style="white-space:pre"> </span><button class="button white">Button Tag</button> <span style="white-space:pre"> </span></div> <div class="demo"> <span style="white-space:pre"> </span><a href="#" class="button orange">橘红</a> <span style="white-space:pre"> </span><a href="#" class="button orange bigrounded">Rounded</a> <span style="white-space:pre"> </span><a href="#" class="button orange medium">Medium</a> <span style="white-space:pre"> </span><a href="#" class="button orange small">Small</a> <span style="white-space:pre"> </span><input class="button orange" type="button" value="Input Element"> <span style="white-space:pre"> </span><button class="button orange">Button Tag</button> <span style="white-space:pre"> </span></div> </div> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><div style="width:728px;margin:10px auto;"> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- html5tricks-demo --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4188263447419139" data-ad-slot="1639624407"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="display:none"><script language="javascript" type="text/javascript" src="/16741667.js"></script><a href="http://www.51.la/?16741667" target="_blank"><img alt="51.la 专业、免费、强健的访问统计" src="http://icon.ajiang.net/icon_0.gif" style="border:none"></a> </div><div style="display:none"><script language="javascript" type="text/javascript" src="/17278758.js"></script><a href="http://www.51.la/?17278758" target="_blank"><img alt="51.la 专业、免费、强健的访问统计" src="http://icon.ajiang.net/icon_0.gif" style="border:none"></a> </div><style type="text/css">.source-url{font-size:15px;text-align:center}</style> <script src="/follow.js" type="text/javascript"></script> </div> </body></html>