使用纯 CSS 设计3D按钮

日期：2007年8月17日作者：查看:[大字体中字体小字体]

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）和链接

以下是引用片段：
<body>
<div id="buttonA">
    <ul>
        <li><a href="link1.html">Button 1</a></li>
        <li><a href="link2.html">Button 2</a></li>
        <li><a href="link3.html">Button 3</a></li>
    </ul>
</div>
</body>

CSS 样式使这种方法与设计普通的平面按钮的样式非常相似。唯一多出来的地方是这里将 border-style: outset和 border-style: inset规则同 border-width设置组合使用，后者将边界宽度设置的足够大以使其可见。

以下是引用片段：

body {
    margin: 0px;
    padding: 0px;
}
div#buttonA {
    margin-left: 50px;
}
div#buttonAul {
[1] [2] [3] [4] 下一页
使用纯 CSS 设计3D按钮相关文章：
·《真?三国无双3》月英使用心得 - 真三国无双4攻略秘籍 - 真三国无双4
·2007年结婚吉日黄道吉日通用表
·QQ空间开场代码使用说明
·我所用的140个XP高级优化技巧！
·怎么用虚拟光驱装系统？
·用移动硬盘来安装Vista系统
·为什么iexplore.exe在打开网页时CPU使用会100%？
·局域网常用的DOS查询IP地址命令
·我也发个破解(可破解正版中文旗舰版 Windows Vista Ultimate ChnSimp )试用没问题
·MSComm控件使用详解
使用纯 CSS 设计3D按钮相关软件
·慧视小灵鼠(用鼠标手写输入法)
·金山快译 V2007 绿色精简试用版
·flv格式转3gp格式专用软件(微视转码工具)
·网络还原精灵(网吧专用版) 2006 V3.2.1.0
·韩国语实用语法
·新万能主板驱动适用于所有主板
·上海市2000年度《职称计算机应用基础考试练习软件》
·局域网共享设置梦想吧专用版
·实用万年历V3.8
·万用网络加速器 V2.0

上一篇:突破IE屏蔽限制，自己的网站使劲弹新IE窗口

下一篇:Phtoshop图层样式轻松实现人体裂痕特效

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

使用纯 CSS 设计3D按钮

精品推荐

热点TOP10

特别推荐