HTML 圆角按钮的实现备忘

最新推荐文章于 2024-03-29 03:29:44 发布

cuanchuan4660

最新推荐文章于 2024-03-29 03:29:44 发布

阅读量131

点赞数

文章标签： php

来自： http://www.zhangxinxu.com/wordpress/?p=292 和 http://www.diaoyude.cn/index.php?option=com_content&view=article&id=115:css-rounded-button-adaptive-approach-width&catid=5:divcss&Itemid=2[@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标签组合，

最终代码：