纯 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 { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; } div#buttonAli { list-style-type: none; height: 30px; width: 125px; margin: 20px; text-align:center; } div#buttonAli a { height: 100%; width: 100%; display: block; text-decoration: none; border-width: 6px; } div#buttonAlia:link { color: #000000; font-weight: bold; background-color: #CCCCCC; border-style: outset; } div#buttonAlia:visited { color: #000000; font-weight: normal; background-color: #CCCCCC; border-style: outset; } div#buttonAlia:hover { font-weight: bold; color: #FFFFFF; background-color: #999999; border-style: outset; } div#buttonAlia:active { font-weight: bold; color: #FFFFFF; background-color: #666666; border-style: inset; } |
