如何将html的按钮做成圆角,HTML 圆角按钮的实现备忘

来自： 和 [@more@]

.g_a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle;}

.g_b{float:left; background:#e3e3e3; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; position:relative;}

.g_c{display:block; line-height:0.6em; background:#f9f9f9; border-bottom:2px solid #eeeeee;}

.g_d{display:block; padding:0.1em 0.6em; margin-top:-0.6em; cursor:pointer;}

HTML代码如下：

通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图 片。

CSS:

a{background: url('/lio.gif') left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}a span{background:url(lio.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}

a:hover{background: url('/lio.gif') left -30px;height:30px;}a:hover span{background:url(lio.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }

关键是左对齐和右对齐用A标签和span标签组合，

最终代码：

argin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />CSS自适应宽度圆角按钮做法 diaoyude钓鱼的首页你是谁我是lio你不是lio我真的就是lio呀