純 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>
1 2 3 下一頁
在前面的文章中我已經講到過創建 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 屬性以及讓浏覽器處理每個邊界的實際顏色之外，你還可以使用自己的樣式規則為每個邊界單獨設置顏色。 上一頁 1 2 3 下一頁
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 狀態時產生被按下的效果。控制這些細節的優點是你可以設置獨立的側面和頂部加亮區的顏色，而且最後的結果在所有浏覽器表現更加一致。
上一頁 1 2 3