css+div自适应宽度圆角旋钮

css+div自适应宽度圆角按钮

html如下：

<a target=”_blank” href=”http://iscss.tk/“><span>iscss.tk</span></a>

css如下：

.iscssKey{ float:left; height:22px; background:url(/img/2012/07/01/14202822620.gif) left 0 no-repeat; color:#FFF; font-size:12px;}
.iscssKey span{ float:left; height:22px; line-height:22px; background:url(/img/2012/07/01/14202822620.gif) right -22px no-repeat; margin-left:10px; padding-right:10px; display:inline; cursor:pointer;}
.iscssKey:hover{ background-position:left -44px;}
.iscssKey:hover span{ background-position:right -66px;}

为什么我们的a标签里边要放入一个span呢？我们的自适应宽度就是靠他了，原理就是：

a标签从背景左对齐，构建出了按钮的左侧圆角。

span标签背景右对齐，就构建出了按钮右侧的圆角，相互叠加就形成了我们想要的自适应宽度圆角按钮。

至于滑过的效果，我想大家都会做了。只是当鼠标划上iscss.tk文字时，在hover处定义了一下背景图片的位置而已。

这种方法是最常用的一种，但是也存在着一个问题，如果按钮特别长，大于了我们背景图片的两个宽，那我们的按钮就露馅了~呵呵。不过一般应用下，我们都能控制按钮的一个大致宽度区间，所以这一点不用担心，如果你需要的比较宽，就把背景图片做宽一点，如果特别宽，跟一个标题栏一样了，那你还是使用三张图片平铺的方法吧（那么长好像也不叫按钮了，没人会做那么长的吧~呵呵）

好啦，这个圆角按钮就给大家介绍到这里吧，希望大家多多支持我哦。

?
?
?

css+div自适应宽度圆角旋钮

热点推荐