使用纯 CSS 设计3D按钮

方法2：控制单个侧面

使用 inset/outset 边界样式是模拟3D效果的一种简单快捷的方法。然而，这不是唯一的方法。如果你不喜欢标准的效果，或者你为浏览器在表现方式上的差别而困扰，那么你可以自己控制边界的颜色来产生你想要的效果。

除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜色之外，你还可以使用自己的样式规则为每个边界单独设置颜色。

Figure B shows the results of using a style sheet that specifies the colors of each button side individually. The markup is the same as in Figure A. Here's the CSS code:

图 B展示了使用这种方法得出的3D按钮效果，这里样式表单独指定每个按钮侧面的颜色。图 B 所用标记与图 A 中的一样，下面是 CSS 代码：

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: 10px;
    text-align:center;
}
div#buttonAli a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:link {
    color: #000000;
    font-weight: bold;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:visited {
    color: #000000;
    font-weight: normal;
    background-color: #999999;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #777777;
    border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
}
div#buttonAlia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    border-style: solid;
    border-top-color: #333333;
    border-left-color: #555555;
    border-right-color: #BBBBBB;
    border-bottom-color: #DDDDDD;
}

尽管这块代码明显要比前一个例子中的 CSS 代码要长，但并不是两者间的主要区别。它们的主要区别在于这里使用了一个 border-style: solid规则替换了原来的 border-style: outset (或 border-style: inset) 规则，后接几个规则单独设置每个边界的颜色（border-top-color: #DDDDDD等）。

使用这一方法，你可以完全控制按钮侧面的颜色。也就是说完全由你决定选择合适的颜色来获得你所要的效果——而且，你还要记住交换颜色以使按钮在处于 :active 状态时产生被按下的效果。控制这些细节的优点是你可以设置独立的侧面和顶部加亮区的颜色，而且最后的结果在所有浏览器表现更加一致。

本文作者：Michael Meadhra在Web 发展的最初阶段就在这一领域从事开发。他参与编著的书已累积几十本，包括由Osborne/McGraw-Hill出版的《How to Do Everything with Dreamweaver MX 2004》。