之前做项目的时候，基本都是将圆角背景图切成三块，故而每次用的标签都超级多，a标签中总是包含三个span，然后里面还得放按钮，导航冗余标签极多。

　　事实上是之前理解的滑动门的精髓不够到位。

　　现在有两种方式。

　　效果展示：http://runjs.cn/detail/evk8nkc8

　　先上传要用的两张图片吧。

　　            

　　　　　　　　btnBg.png                                                      bg.png

　　

　　

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>滑动门</title>

<style>

*{margin:; padding:;}

.btn{height:25px; background:url(bg.png) right top no-repeat; float:left; padding-right:10px;text-decoration:none; margin: 3px;}

.btn span{line-height:23px; height:25px; background:url(bg.png) left top no-repeat; float:left; cursor:pointer; color:#76381B; font-weight:bold; padding-left:10px; }

.btn_02{margin-top:6px;display:block;}

.btn_02 span{display:block;}

.btn_02 .left{

    width:3px;

    height:24px;

    float:left;

    background:url(btnBg.png) no-repeat  -1px;

}

.btn_02 .right{

    height:24px;

    float:left;

    background:url(btnBg.png) no-repeat  right -25px;

}

</style>

</head>

<body>

    <a href="#" class="btn"><span>阿斯达的点十分</span></a>

    <a href="#" class="btn_02"><span class="left"></span><span class="right">阿斯达的点十分</span></a>

</body>

</html>

css滑动门制作圆角按钮的更多相关文章

  1. CSS——滑动门技术及应用

    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋 ...

  2. CSS - 滑动门技术

    1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最 ...

  3. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

  4. CSS——滑动门

    在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利 ...

  5. CSS滑动门

    如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...

  6. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  7. WPF 制作圆角按钮

    在程序对应坐置插入以下代码,或是先拖一个按钮控件到窗体中,再替换对应的代码. 修改 CornerRadius="18,3,18,3"  就可以改变圆角大小 按钮效果: <Bu ...

  8. js制作圆角按钮（兼容谷歌，ie7，ie8）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. resin的简单介绍和使用

    1.resin是一款应用服务器(application server),它自身也包含一款支持Http1.1协议的WEB服务器(web server),它也可以和其他的web服务器一起工作如IIS和Ap ...

  2. AD,Group

    DataTable dtUser = GetEmptyDT(); Dictionary<DirectoryEntry, string> test1 = GetUserAndGroup(cl ...

  3. jtemplate使用笔记

    最近的项目中用到了jtemplate, 它是客户端基于javascript的模板引擎,绑定的数据为json对象.以前我在页面上显示数据列表时最喜欢用Repeater控件了,因为它相对与其它几个服务端控 ...

  4. js模拟苹果菜单

    模拟苹果菜单的js代码是从网上看到的,用来做导航菜单还是蛮好看的.这里借鉴一下. 效果描述:当鼠标移动离哪个图片最近的时候,这个图片最大,鼠标离的图片越远,则图片越小: 原理:主要用到了三角形的勾股定 ...

  5. JQuery（一） 入门

    JQuery是一个JS库,可以跨浏览器运行,若开发者面对jQuery编程,则可以在不同的浏览器自由切换. jQuery不再像JS一样面向DOM,而是面向jQuery对象. jQuery提供$()函数, ...

  6. mysql更改数据文件目录及my.ini位置| MySQL命令详解

    需求:更改mysql数据数据文件目录及my.ini位置. 步骤: 1.查找my.ini位置,可通过windows服务所对应mysql启动项,查看其对应属性->可执行文件路径,获取my.ini路径 ...

  7. 用twisted 做一个日志收集系统

    混沌初开 起初我是不会上logging模块的,直接导致了即时有了日志,我也存到了数据库中,而且量也不大,是否能遇到异常只能靠运气了 开天辟地 不得不说,没有任何输出的线上环境真的挺难调试的,当然,聪明 ...

  8. 网络设备作用和工作ISO层

    物理层——中继器和集线器 二者都起数字信号放大和中转的作用. 中继器 Repeater 用来延长网络距离的互连设备.REPEATER可以增强线路上衰减的信号,它两端即可以连接相同的传输媒体,也可以连接 ...

  9. PL/SQL — 变长数组

    PL/SQL变长数组是PL/SQL集合数据类型中的一种,其使用方法与PL/SQL嵌套表大同小异,唯一的区别则是变长数组的元素的最大个数是有限制的.也即是说变长数组的下标固定下限等于1,上限可以扩展.下 ...

  10. NGUI系列教程三

    接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...