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

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

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

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

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

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

步驟1：添加標(biāo)準(zhǔn)陰影

box-shadow的基本語(yǔ)法如下：

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

我們可以疊加多個(gè)陰影，用逗號(hào)分隔。例如：

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

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

步驟2：添加底層顏色

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

inset 0px 25px 25px #930;

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

步驟3：添加高光顏色

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

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

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

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

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

inset 0px 5px 12px #930

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

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

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

瀏覽器兼容性

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

總結(jié)

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

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

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