除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜色之外，你还可以使用自己的样式规则为每个边界单独设置颜色。
使用这种方法得出的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 状态时产生被按下的效果。控制这些细节的优点是你可以设置独立的侧面和顶部加亮区的颜色，而且最后的结果在所有浏览器表现更加一致。
