html css圆角按钮,CSS:CSS使用滑动门技术实现圆角按钮
使用滑动门技术实现圆角按钮,如图所示,背景图和效果图。
所谓滑动门,就是当按钮的状态改变时,移动背景图,显示不同的状态。此法简单有效,但缺点是不能纵向扩展。要处理纵向扩展,就要使用复杂的圆解技术,如4个圆角图片,四个边的图片加上中间的图片一共9张图来实现。
body {
font-size: 23px;
}
.button {
cursor: default;
font-size: 15px;
background: url(button.png) no-repeat top right;
display: inline-block; /* inline element has layout */
/* float: right;*/ /* Can also be not float. */
height: 24px; /* height of the background image */
padding-right: 15px;
white-space:nowrap; /* Don't wrap line */
line-height: 24px; /* Vertically centralize the text */
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
}
.button .inner {
background: url(button.png) no-repeat top left;
display: inline-block;
height: 24px;
white-space:nowrap;
line-height: 24px;
padding-left: 15px;
}
span.button:hover {
text-shadow: 0px 0px 5px #999;
}
span.button:hover span {
}
span.button:active {
text-shadow: 0px 0px 5px #333;
background-position: right bottom;
}
span.button:active span.inner {
background-position: left bottom;
}
The text of the button is very long
不使用a来做按钮,是因为前不久在php中遇到xxxx,点击此链接,会刷新本页,最后只好使用了span来做按钮了,效果是一样的,只不过a的鼠标会自动是手势罢了,上面的文字不可选择。
为了防止选中文字:
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
为了防止按钮中的文字换行:
white-space:nowrap; /* Don't wrap line */
HTML中的元素,要么是inline的(可与其他inline元素在同一行),要么是block的(独占一行),所以为了让按钮能与其他元素在同一行,还要具有block元素才有的layout功能,使用了
display: inline-block;
让按钮上的文字居中,最好的办法是使用 line-height,让其与按钮的背景图一样高:
line-height: 24px;
由于上面使用到的一些CSS属性都是可继承的,所以不用重复再写。
posted on 2010-06-23 06:06 逛奔的蜗牛 阅读(1292) 评论(0) 编辑 收藏 引用 所属分类: 其他编程
html css圆角按钮,CSS:CSS使用滑动门技术实现圆角按钮相关推荐
- css html应用实例1:滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
- 滑动门技术制作不规则按钮
有时候美工脑残的设计了不规则的按钮或边框等,做网页的都知道那玩意实现起来很麻烦,美不美观也是因人而异 这次有个美工做了这么个按钮给我,我日他先人先,因为项目要国际化所以里面的文字是变化的不能用图片只能 ...
- CSS中的滑动门技术
原文作者: Douglas Bowman 原文出自: A List Apart 中文翻译: 54player.com nobita 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许 ...
- css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享 发布时间:2009-10-15 12:48:01 作者:佚名 我要评论 可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
- 前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术 所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性. 具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它.一个在左边,一个在右边.把这两幅图像想象成两 ...
- css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术 为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
- 用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节.在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术. 接下来就来分享一下我个人对滑动门的 ...
最新文章
- jQuery / jQuery mvc plugin
- 用.NET创建Windows服务
- 适用于 deno 的多版本管理工具 dvm 发布
- matlab无法读取xls
- python图像文件压缩_python实现图片压缩代码实例
- Mybatis中的StatementType
- 我的Maven POM配置
- 机械专业与python的联系_机械转行想学python?
- [编织消息框架][网络IO模型]AIO
- 【GStreamer开发】GStreamer基础教程05——集成GUI工具
- 换回了WINDOWS7
- java爬虫模拟登陆_java爬虫实战之模拟登陆
- 实现一个串口调试工具
- 开关电源matlab仿真,用数学方法建立一种开关电源全系统的仿真模型
- 服务器文件安全扫描,服务器安全扫描工具
- [折腾日记]win10 ,ubuntu双系统安装避坑指南
- 数字信号处理基础----采样定理
- Excel文件双击打开后无内容且不可编辑,再次双击文件正常显示
- VC2008下使用OpenSSL 1.0.0g(免编译)
- (转载)一种简单而有趣的数据结构——并查集
热门文章
- 六年正增长,康师傅携手的进击之路
- 热烈祝贺3I工作室7个大学生创新创业项目全部获得立项
- Nginx 访问日志配置
- Java中Date类和Calendar类的使用
- Springboot中@SuppressWarnings注解详细解析
- 我的世界服务器无线重启咋办,我的世界》服务器重启方法介绍 如何重启服务器...
- Linux C 字符串函数sprintf()和snprinttf()
- 使用 Docker 搭建本地开发环境!真心强啊
- java solid设计原则_设计模式之SOLID原则
- 美国前顾问称美前总统1954年曾会晤外星人