在前面的文章中我已经讲到过创建 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#buttonAlia:active规则之外，所有样式都使用 border-style: outset规则，div#buttonAlia:active使用 border-style:inset规则。这样就使按钮状态有一个凸起的外观——当然要将按钮被点击时的情况除外，在按钮被点击时它呈现被按下的状态。
不同的浏览器呈现 inset 和 outset 边界的方式有很大的不同。Internet Explorer 创建更加精细的效果，在每个边界的内边缘有一个加亮区，在外边缘有一个阴影区。而另一方面，Netscape 则以固定的颜色呈现每个边界，这样就产生一个比较有突边的，不怎么圆滑的外观效果。
使用 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; } |
