漂亮的CSS3圆角按钮组合DEMO演示

最新推荐文章于 2024-06-24 10:48:58 发布
最新推荐文章于 2024-06-24 10:48:58 发布
阅读量1.5k 收藏 1
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xllily_11/article/details/49024291
版权 
<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>
小北哥哥和北妈
关注
27 个 CSS 案例演示和 DEMO
m0_67619362的博客
05-08 686
看上去有点乱糟糟的对吧？没事，给它加上overflow: hidden，把多余的文本遮住。通过JS分割文本并应用交错动画，就得到了如下的效果，这也是接下来本文要讲的overflow障眼法。 **本demo地址：**https://codepen.io/alphardex/full/wvBeXjd 8、overflow障眼法 ================= 之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。 笔者就用渐变来模拟那道光，通过transform: translateX()将其.
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6418
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
使用CSS3制作漂亮的圆角按钮.zip
07-03
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
用CSS实现圆角按钮的效果
pam_xmn的专栏
05-17 1816
http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="en">Stu Nicholls | CSSplay | Another snazzy menu#outer {display:block; position:relative; background:#eee;
CSS 轻松实现常见各类奇形怪状按钮
最新发布
柑橘乌云_
06-24 1413
基于上述的实现，我们不难发现，一些稍微特殊的按钮，无非都通过拼接、障眼法、遮罩等方式实现。渐变（线性渐变、径向渐变、多重渐变）遮罩mask裁剪clip-path变形transform发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。上述的图形，再配合，基本都能实现不规则阴影。再者，更为复杂的图形，如下所示：还是切图吧，CSS 虽好，实际使用中也需要考虑投入产出比。
纯CSS方式实现圆角框
蛋蛋拜尔
08-12 258
纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果 [img]http://longphoenix.iteye.com/upload/picture/pic/69262/77a23da4-0e6a-395b-be03-75a9a7bcf927.png[/img] [b]1、Html结构层：[/b] [code="html"] ...
div+CSS3实现制作精美漂亮的圆角按钮特效代码
weixin_30808693的博客
01-27 242
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>div+CSS3实现制作精美漂亮的圆角按钮特效代码 - 代码笔记 www.daimabiji.com</title> <style type="text/css"> .d...
圆角按钮
小老头的博客
09-04 146
在drawable中写上这个文件，然后把Button的背景设置成这个文件就ok了
CSS3鼠标悬停动画按钮集合DEMO演示
09-08
本资源"CSS3鼠标悬停动画按钮集合DEMO演示"提供了一系列预设的、可交互的按钮样式，展示了如何利用CSS3实现吸引用户注意力并提升用户体验的交互设计。 首先，让我们深入理解CSS3中的关键帧动画（@keyframes）——这...
CButtonST_demo.rar_DEMO_cbuttonst vs2003_图片 按钮_按钮 图_漂亮 按钮
09-14
CButtonST_demo.rar 是一个关于CButtonST控件的演示程序，主要展示了如何在Visual Studio 2003环境下创建和使用美观的自定义按钮。CButtonST是MFC（Microsoft Foundation Classes）库的一个增强版按钮类，它扩展了...
css3课程.7z
08-15
压缩包中的图片资源可能是示例代码中使用的，用于演示边框效果或者某个CSS3特性的视觉展示。 **7. 笔记（笔记.txt）** 这份文本文件可能是学习过程中记录的关键点、技巧或问题解答，对复习和理解课程内容很有帮助。...
Qt圆角功能和状态组合按钮,可以显示颜色或者图片
06-17
Qt圆角功能和状态组合按钮,可以显示颜色或者图片
jquery-scroll-follow.js
07-09
侧栏固定式网页框架，很好的运用了 CSS+ jQuery的特性，左侧栏，是不会随着滚动条而滚动的，当你拖动滚动条的时候，右侧主体区的内容跟着拖动，但左侧的菜单始终固定不动，像一个被固定的层一样。
CSS：圆角按钮的制作
stephen830
04-29 1487
      CSS：圆角按钮的制作 (2013-01-18 10:52:56) 转载▼ 标签： css 圆角按钮 css按钮 按钮宽度自适应 分类： div css 我们都知道现在CSS3的属性border-radius很方便的就可以制作出圆角按钮的效果，但是就目前浏览器的市场占有率来讲，直接使用CSS3的效 果还是不理想的，因为目前Op...
圆角按钮按钮
代码帮
12-16 415
圆角按钮是一种在界面设计中常见的元素，它的外观特点是按钮的角被设计成圆角而不是直角。在网页设计、移动应用程序和其他用户界面中经常使用圆角按钮，以改善用户体验和美观度。如果你正在进行界面设计，并想要创建圆角按钮，你可以使用CSS（层叠样式表）来实现这个效果。类定义了按钮的基本样式，包括圆角、背景颜色、文字颜色等。请根据你的设计需求调整这些样式属性，以创建符合你项目风格的圆角按钮。属性，你可以设置按钮的圆角半径。伪类可以实现按钮外观的变化，以提供一些视觉反馈。
CSS round buttons
SalmonellaVaccine的专栏
10-10 911
CSS3, with its great border-radius property, allows creation of fixed-size and responsive CSS round buttons. This article explains how to create circular buttons using CSS3 only. Add animation, shadow
漂亮的css圆角按钮样式
ICode联盟
05-14 699
下载地址 几种好看的button按钮样式，漂亮的css圆角按钮样式。 dd:
圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
weixin_28925387的博客
08-03 862
CSS3作为对CSS的升级，将原有的一些大模块分解为更小更易于表达的小模块，取得了相当的好评，也使得开发周期变短、过程变得愉快！今天分享一下自己使用的基于CSS3的一组圆角按钮，效果不错，但欢迎升级指正！这组圆角按钮，使用了CSS3的 border-radius 和 box-shadow 属性！先分享一下haibor对这两个属性的理解：Border Radius：边界半径，写法类似内边距(padd...
Android Button圆角矩形+Selector组合
my9074的专栏
04-13 1899
Android默认Button是矩形的，假如需要一个圆角矩形的Button该如何实现呢？ Drawable Resources为我们提供了不同类型的画板。其中有一个Shape Drawable。这个XML文件定义了一个几何图形，包括颜色和渐变和四个边角角度。 关于 Google官方文档也给出了详细的解释：点击打开链接 (需要翻墙) Shape提供了几种属性： 1.标签：用来描述圆角
CSS3快速创建圆角效果
"这篇文章主要介绍了如何使用CSS3的border-radius属性轻松实现Web页面中的圆角效果，从而提高页面性能和视觉可靠性。CSS3的border-radius属性允许开发者无需借助图片，直接通过设置元素四个角的圆角半径来创建圆角...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值