CSS 按钮的效率远比基本图像的按钮的效率高得多，因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且，你不需要任何 JavaScript 来交换图像以实现翻卷效果，因为 CSS 伪类（pseudoclass）能够让你为链接的每个状态（链接<link>、已访问<visited>、悬停<hover>、激活<active>）建立独立的样式。
纯 CSS 按钮唯一的问题是它们看上去相当单调，只有固定的颜色背景和一个简单的边界。一个解决方法是使用混合技术向 CSS 样式的文本按钮加入一个背景图像，从而使其具有3D效果。然而，读者的电子邮件提示我寻找一种使用纯 CSS 创建3D按钮效果的方法——不需要图像。我发现通过控制 CSS 按钮边界的样式有两个方法可以创建斜面边缘的外观效果。
创建斜面边缘效果
要使一个按钮具有3D斜面边缘效果，需要模拟一个光源，以在一个凸起按钮的边缘创建加亮区和阴影区。如果光源在上面稍微偏向按钮的左边，那么按钮的顶部和左侧就会比按钮表面更亮，而底部和右侧就会比按钮表面更暗。
|
所以，创建三维效果的秘密是使用 CSS 边界模拟按钮的侧面，并为每个边界的使用稍微不同的颜色，具体的颜色方案要根据它所表示的是光亮的一侧还是阴暗的一侧而定。为了看上去更加真实，边界应该具有斜接角，CSS 边界能够很好地满足这一需要。 方法1：使用inset/outset（嵌入线/浮出线）边界 有一个 CSS 边界属性能够自动产生合理的斜面边缘模拟效果。你只须为按钮样式的 border-style 属性指定为 inset 或者 outset即可。浏览器会以稍微不同的背景色阴影来处理元素边界的表现细节，从而得到期望的效果。outset属性模拟凸起按钮的阴影边缘，inset 属性通过反转阴影来模拟按钮被按下的情景。 图 A 展示了实际的 inset/outset 边界效果。这个例子是由一些非常简单的代码产生的。XHTML 非常简单，只包含一些按钮标签（label）和链接
CSS 样式使这种方法与设计普通的平面按钮的样式非常相似。唯一多出来的地方是这里将 border-style: outset和 border-style: inset规则同 border-width设置组合使用，后者将边界宽度设置的足够大以使其可见。
在前面的文章中我已经讲到过创建 CSS 按钮的方法，所以我将只挑要点部分解释。 div#buttonAul规则设置常规文本的尺寸和间距，div#buttonAli规则去除列表项的默认项目符号（list-style-type: none）并设置按钮框的尺寸。div#buttonAli a规则使整个按钮可点击（height: 100%; width: 100%; display: block;），它还是设置边界宽度的一个很方便的地方。 样式的其余部分控制不同按钮状态的外观变化。所有伪类（:link、:visited、:hover、:active）都有一个 color、font-weight、background-color 和 border-style 规则。除div#buttonA
文章整理：西部数码--专业提供域名注册、虚拟主机服务 相关文章
 热点关注
IDC资讯
虚拟主机
域名注册
托管租用
vps主机
智能建站
网站运营 建站经验 策划盈利 搜索优化 网站推广 免费资源 网站联盟 联盟新闻 联盟介绍 联盟点评 网赚技巧 行业资讯 业界动态 搜索引擎 网络游戏 门户动态 电子商务 广告传媒 网络编程 Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它 服务器技术 Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护 软件技巧 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷 Internet Explorer 网页制作 FrontPages Dreamweaver Javascript css photoshop fireworks Flash 程序设计 Java技术 C/C++ VB delphi 网络知识 网络协议 网络安全 网络管理 组网方案 Cisco技术 操作系统 Win2000 WinXP Win2003 Mac OS Linux FreeBSD
| |||||||||
