之前在介绍CSS sprites的时候提到了自适应宽度的圆角按钮,这个按钮实际应用还是很广泛的,所以我再次也给大家介绍一下。首先请大家看一下这个例子,就是按钮的宽度会根据文字的多少变化,鼠标滑过会有变化效果。
http://www.iscss.tk/demo/key/key.html
我们做这个效果需要的是这样一张图片,上边一半是他正常效果,下边一半是滑过时的效果。这里只是在划过的时候颜色变浅。
html如下:
<a target=”_blank” href=”http://iscss.tk/“><span>iscss.tk</span></a>
css如下:
.iscssKey{ float:left; height:22px; background:url(http://www.iscss.tk/wp-content/uploads/2010/09/iscssKey.gif) left 0 no-repeat; color:#FFF; font-size:12px;}
.iscssKey span{ float:left; height:22px; line-height:22px; background:url(http://www.iscss.tk/wp-content/uploads/2010/09/iscssKey.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处定义了一下背景图片的位置而已。
这种方法是最常用的一种,但是也存在着一个问题,如果按钮特别长,大于了我们背景图片的两个宽,那我们的按钮就露馅了~呵呵。不过一般应用下,我们都能控制按钮的一个大致宽度区间,所以这一点不用担心,如果你需要的比较宽,就把背景图片做宽一点,如果特别宽,跟一个标题栏一样了,那你还是使用三张图片平铺的方法吧(那么长好像也不叫按钮了,没人会做那么长的吧~呵呵)
好啦,这个圆角按钮就给大家介绍到这里吧,希望大家多多支持我哦。
文章作者:IceSun
本文地址:http://www.iscss.tk/?p=46
版权所有 © 转载时必须以链接形式注明作者和原始出处!
相关推荐
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
第一张图用于高度自适应,第二张用于宽度自适应。如果觉得不够高或宽,可以修改图片。实现的方法很简单,其实就是套2层,其中外层用长背景,内层用短背景盖住。拿高度自适应来说,可以用一个div(用长背景居底铺)...
之后本书又着重讨论如何使用DIV结合CSS来搭建网站,同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和...
style type=”text/css”> body,p,div {margin:0;padding:0;} .Box {margin:10px auto;width:500px;} /*淘宝的圆角方法*/ .R-1-T,.R-1-B {height:6px;position:relative;background-image:url(/do/uploads/allimg...
3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流...
所有卡片类型div均加入阴影,去除原输入框的阴影,按钮以及输入框选中后加入框外动效。 功能列表:自定义顶栏用户头像,自定义侧栏默认状态,自定义用户中心首页背景图片,自定义登录/注册/重置密码页面背景图片,...
5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...
5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...