css 按钮小圆角,CSS自适应宽度圆角按钮做法

之前做圆角，一直是切适当大小的背景图片切换的，这么久了才发现这简单的自适应圆角做法，自己也写一下吧，做个笔记吧。本打算自己写一个，LIO的博客写的很清楚，就直接转载了

按钮图片

自适应宽度圆角按钮实现原理

通过背景的左对齐和右对齐用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标签组合，

HTML:

href=”#”>首页

href=”#”>你是谁

href=”#”>我是lio

href=”#”>你不是lio

href=”#”>我真的就是lio呀

效果图

看一下自己修改的一个Thinksns系统的，自适应按钮的切换

按钮图片

效果图片

CSS

.tab-menu { background-image:url(images/tab_line_bg.gif);

background-repeat:repeat-x; background-position:0px bottom;

clear:both; height: 35px; width: 100%; overflow: visible;

white-space: nowrap; }

.tab-menu ul { margin-left: 10px; height: 27px; padding-top:8px;

}

.tab-menu li { float:left; margin-right: 5px; }

.tab-menu li a { height:27px; line-height:27px;

background-image:url(images/tab_menu.gif);

background-repeat:no-repeat; background-position:left center;

float:left; padding-left:10px; text-decoration:none; display:block

}

.tab-menu li a span { background-image:url(images/tab_menu.gif);

background-repeat:no-repeat; background-position:right center;

height:27px; display:block; padding-right:10px; color:#333;

float:left; cursor:pointer; text-decoration: none; line-height:

27px; }

.tab-menu li a:hover { background-position:left top;

text-decoration: none; }

.tab-menu li a:hover span { background-position:right top;

cursor:pointer; display:block; height:27px; text-decoration: none;

color:#f0861a;}

.tab-menu li a.on, .tab-menu li a.on:hover {

background-position:left bottom; display:block; height:27px;

text-decoration: none; font-weight:700;}

关键是这段代码里面运用了

• ,还有就是滑动图片不是按像素滑动的直接写的 top center bottom

  html代码

  • href=”#”>我的好友

  • href=”#”>好友屏蔽

  • href=”#”>访问脚印

  • href=”#”>查找朋友