 |
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 状态时产生被按下的效果。控制这些细节的优点是你可以设置独立的侧面和顶部加亮区的颜色，而且最后的结果在所有浏览器表现更加一致。
热卖推荐： 手机 诺基亚 MP5 电脑包 双卡双待 手机链 U盘 笔记本电脑
关注此文的读者还看过：
