CSS3按鈕樣式：巧用box-shadow打造炫酷按鈕效果

本文探討使用CSS3創(chuàng)建按鈕的兩種方法：CSS3漸變和box-shadow。雖然CSS3漸變在按鈕樣式中越來越流行，易于配置且能隨按鈕區(qū)域縮放，但其瀏覽器支持度有限（主要為Firefox、Chrome和Safari），且語法在不同瀏覽器之間不一致。

相比之下，利用box-shadow屬性疊加顏色層，如同畫家疊加顏料，可以創(chuàng)建無圖片、可縮放、完全可配置的光滑按鈕。這種方法雖然初看起來box-shadow顏色的分層可能比較復(fù)雜，但其靈活性更高。

鑒于純CSS3漸變的支持度對于重要的UI元素來說還不夠完善，而基于圖像的按鈕又缺乏靈活性，因此掌握使用CSS3漸變和box-shadow屬性創(chuàng)建按鈕的方法對網(wǎng)頁設(shè)計師來說至關(guān)重要。

方法一：box-shadow打造多層效果

我們先從一個基本的扁平橙色按鈕開始。以下步驟將逐步演示如何使用box-shadow創(chuàng)建具有光澤感的按鈕效果。

步驟1：添加標準陰影

box-shadow的基本語法如下：

box-shadow: X偏移量 Y偏移量 模糊半徑 顏色

我們可以疊加多個陰影，用逗號分隔。例如：

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

第一個陰影創(chuàng)建了一個帶有20%透明度的黑色陰影，向右下方偏移3像素，模糊半徑為6像素。第二個陰影沒有偏移，提供一個細微的暗色輝光，讓按鈕更有質(zhì)感。

步驟2：添加底層顏色

inset關(guān)鍵字可以反轉(zhuǎn)陰影，使其顯示在按鈕內(nèi)部。我們可以使用它來創(chuàng)建底層顏色：

inset 0px 25px 25px #930;

這會在按鈕下半部分留下一個柔和的淺橙色區(qū)域，模擬光線在玻璃表面的反射效果。

步驟3：添加高光顏色

在按鈕上部添加一個更淺的橙色陰影，模糊半徑較小，以創(chuàng)建硬邊的高光效果：

inset 0px 20px 2px rgba(240, 150, 69, .5)

注意，新的box-shadow會疊加在之前的陰影下方，因此需要將高光顏色放在較暗顏色的前面。

步驟4：調(diào)整反射

為了使高光更自然，可以在按鈕頂部疊加一層模糊的深橙色陰影：

inset 0px 5px 12px #930

步驟5：添加懸停狀態(tài)

在鼠標懸停時，可以調(diào)整陰影參數(shù)，使按鈕看起來更立體：

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

瀏覽器兼容性

此方法在Safari和Chrome中完美運行。Firefox的CSS語法幾乎相同，只需將-webkit-box-shadow替換為-moz-box-shadow。Opera和IE9也支持box-shadow，但需刪除-webkit-前綴。舊版IE不支持box-shadow。

總結(jié)

雖然示例中使用的橙色按鈕可能略顯俗氣，但這種利用box-shadow疊加顏色層的方法非常實用，可以創(chuàng)建出各種炫酷的按鈕效果。 與CSS3漸變相比，這種方法具有更好的瀏覽器兼容性和靈活性。 希望本文能為您的UI設(shè)計提供新的思路。

(此處應(yīng)插入步驟1-5的效果圖，但由于無法直接插入圖片，請自行根據(jù)描述補充圖片。圖片鏈接請?zhí)鎿Q為實際圖片鏈接)

以上是影子拳擊：無圖像，CSS3，光澤的按鈕的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！