CSS3?

陰影（Boxshadow）是CSS3的特性之一，該效果主要反應為立體效果或是說3D效果，下面向大家介紹如何使用線上CSS3工具-CSS3 Generator生成定製的併兼容各種瀏覽器的陰影特效CSS3程式碼。

工具/原料

瀏覽器

1. 開啟CSS3線上設計工具網站CSS3 Generator

開啟瀏覽器（最好不要用IE，因為IE對W3C標準的支援都不好），輸入網址：“, 開啟CSS3 Generator 。

2. 完成基本樣式設定

點選“edit the basics”按鈕， 開啟基本設定面板，設定border（邊框）寬度、顏色、背景色。編輯面板如下圖所示：

點選border-radius面板右側的“+”展開border-radius設定面板，按需要設定四個邊角的圓度。

3. 開啟box-shadow陰影設定面板

點選box-shadow右側的“+”用以展開box-shadow設定面板。

4. 設定box-shadow陰影效果

設定陰影水平偏移量。在“horizontal”右側的輸入框中輸入偏移量，其值可以是正數，也可以是負數。

正數：陰影在物件的右邊。

負數：陰影在物件的左邊。

設定陰影垂直偏移量。在“vertical”右側的輸入框中輸入偏移量，其值可為正數和負數。如果為正數，陰影在物件的底部，其值為負數時，陰影在物件的頂部。

設定陰影模糊半徑。在“blur”右側的輸入框中輸入模糊半徑值，其值為非負數，為0時，表示陰影不具有模糊效果，其值越大則陰影的邊緣就越模糊。

設定陰影擴充套件半徑。在“spread”右側的輸入框中輸入陰影擴充套件半徑值，其值可正可負，如果為正，則整個陰影都延展擴大，為負則縮小。

設定陰影色。在“shadow”右側的顏色面板中選擇陰影顏色，此引數可選, 如果不設定，瀏覽器會取預設色，但各瀏覽器預設色不一樣，webkit核心的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色，最好不要省略此引數。

設定陰影型別：支援兩種陰影型別，外陰影和內陰影，此引數可選。如不設定，則預設外陰影，如設定為“inset”，則其投影型別為內陰影。

5. 預覽並生成CSS3樣式程式碼

在右側的預覽面板預覽設定後的陰影效果。

點選“GET THE CODE!”按鈕生成CSS3程式碼

在生成的程式碼視窗選擇支援的瀏覽器型別，然後點選“Select Code”拷貝樣式程式碼到自己的程式碼中。