初學者專用陰影產生器：實用 CSS 指南

專為初學者設計的方塊陰影產生器，可將六個可調整的值——水平偏移、垂直偏移、模糊、擴散、顏色和不透明度——再加上選用的內嵌設定，轉換成一項可直接複製的 CSS box-shadow 宣告。CSS 方塊陰影產生器適合在您想撰寫 CSS 前先查看陰影，但尚不了解這些值如何影響位置、柔和度或大小時使用。請先從柔和的陰影開始，觀察範例卡片如何變化，並閱讀下方的宣告。之後，您便可將該屬性貼到支援 box-shadow 的卡片、按鈕、面板或其他元素的選擇器中。此產生器可處理單一陰影圖層，以固定順序寫入各項值，並在您的瀏覽器本機預覽完全相同的值。它不會選擇選擇器、加入 HTML 或修改您的專案。因此，這套流程既適合學習此屬性，也適合產生可用於實際介面、在不同主題、螢幕尺寸與互動狀態中測試的值。

每個陰影控制項的作用

適合初學者的陰影應該逐項決心逐步建立。運用偏移值決定陰影的出現位置，使用模糊柔化邊緣，利用擴散調整形狀大小，以顏色和不透明度控制色調，並且只在陰影應位於邊框內側時使用內嵌設定。每次變更都會反映在範例卡片中，因此您可以在複製任何內容之前，比較克制的設定與較強烈的設定。

控制項	範圍或格式	變更內容
水平偏移	-200 到 200 像素	正值會將外陰影向右移動；負值會將其向左移動。
垂直偏移	-200 到 200 像素	正值會將外陰影向下移動；負值會將其向上移動。
模糊半徑	0 到 200 像素	零會產生硬邊。較大的值會柔化並擴大可見的過渡區域，但不會變更明確設定的擴散值。
擴散半徑	-100 到 100 像素	正的擴散值會在模糊前擴大陰影形狀；負的擴散值則會使其收縮。足夠小的負值可能讓外陰影難以看見。
顏色	六位數十六進位	紅、綠與藍色通道會轉換為十進位的 rgba 元件。
不透明度	0 到 100 百分比	此值會轉換為 0 到 1 的 alpha 值，並四捨五入至最多小數點後三位。零 alpha 值會保留在宣告中，但不會顯示出來。
內嵌	關閉或開啟	將陰影從外側投影變更為繪製於元素邊框內側的陰影。

偏移值會共同運作，而非各自代表羅盤上的某個方向。對於外陰影，正的水平值與垂直值會將其向右及向下移動；負值則會將其向左及向上移動。啟用內嵌時，相同的偏移值會影響內側陰影的視覺方向。其語法遵循 W3C 背景與邊框 box-shadow 規格以及MDN box-shadow 參考資料中的 CSS 模型。

建立並複製您的第一個陰影

1. 開啟產生器。 使用CSS 方塊陰影產生器，並找到下方的範例卡片與宣告。預覽和序列化程式碼會在您的瀏覽器本機更新，而範例卡片只會在該本機預覽中內嵌使用產生的值。任何 CSS、顏色選擇或剪貼簿內容都不會傳送到伺服器。
2. 選擇外側或內嵌。 若要讓陰影位於元素邊框外側，請將內嵌保持關閉；若要讓陰影繪製於邊框內側，請啟用此設定。內嵌適合用於按下狀態的控制項、凹陷面板、內側高光及其他深度線索。
3. 設定陰影位置。 在 -200 到 200 像素的限制內設定水平與垂直偏移。對於外陰影，正的水平值會將其向右移動，負值會將其向左移動；正的垂直值會將其向下移動，負值會將其向上移動。
4. 設定柔和度與形狀。 選擇 0 到 200 像素的模糊半徑，以及 -100 到 100 像素的擴散半徑。零模糊會產生硬邊。正的擴散值會在模糊前擴大陰影形狀，而負的擴散值則會使其收縮，並可能隱藏外陰影。
5. 選擇顏色與不透明度。 輸入六位數的十六進位顏色，並將不透明度設為 0 到 100 百分比。此工具會將顏色通道轉換為十進位的 rgba 元件，並將不透明度寫成 0 到 1 的 alpha 值。
6. 檢查範例與宣告。 查看卡片的外觀，然後閱讀下方確切產生的宣告。這是本機預覽所使用的值，因此您可以將預期效果與即將貼上的程式碼進行比較。
7. 複製純宣告。 複製的輸出包含 box-shadow 屬性及其值，不包括選擇器、HTML 片段、style 標籤、JavaScript 或供應商前綴。
8. 貼上並測試。 將宣告放入支援 box-shadow 的元素所適用的樣式規則中。請在各種主題、尺寸、聚焦狀態和瀏覽器中測試實際元件，而不要只依賴範例卡片。

閱讀產生的 CSS

輸出順序是固定的：選用的 inset、水平偏移、垂直偏移、模糊半徑、擴散半徑，然後是 rgba 顏色。這四個長度值均使用像素。當不透明度為零時，產生的 alpha 值仍會保留在宣告中，因此即使沒有可見的陰影出現，陰影在語法上仍然存在。

其中一種可能的宣告是 box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);。在此範例中，陰影位於右側四像素及下方八像素的位置，使用 16 像素的模糊，沒有擴散，並套用 25 百分比黑色 alpha 值。

複製的結果是純文字，供支援 box-shadow 的元素之樣式規則使用。現代瀏覽器通常支援無前綴的屬性，但此產生器不會加入舊版的 -webkit- 或 -moz- 前綴、偵測瀏覽器目標、執行 autoprefixer 或測試正式環境的樣式表。

在外側與內嵌陰影之間做選擇

外側與內嵌陰影可以呈現不同的結構感覺。請依據您希望陰影傳達的關係來選擇模式，而不要只看範例卡片的外觀。

考量因素	外側陰影	內嵌陰影
位置	出現在元素邊框外側。	出現在元素邊框內側。
適用於	凸起的卡片、按鈕、面板與浮動表面。	按下狀態的控制項、凹陷面板、內側高光與深度線索。
偏移行為	正的水平值與垂直值會將可見陰影向右及向下移動。	相同的偏移值會影響內側陰影的視覺方向。
主要注意事項	過於強烈的值可能讓元件看起來與其表面脫離。	強烈的值可能讓按下或凹陷的表面看起來生硬或帶有紋理。

無論選擇哪種模式，陰影都應該強化結構，而不是單獨承擔重要意義。請在適用情況下，檢查淺色與深色主題、停用與聚焦狀態、高對比設定，以及降低透明度的偏好。陰影可能降低清晰度、產生錯誤的層級關係，或在複雜背景上表現不佳。

在實際介面中測試陰影

範例卡片會單獨顯示產生的值，但無法重現您的版面配置、主題或元素形狀。將宣告貼到預定的選擇器後，請在與最終用途相似的背景上檢查實際元件。

• 在淺色與深色主題中測試元素，確保選用的顏色與不透明度仍然適當。
• 檢查小型、一般與大型元件尺寸，了解偏移和可見範圍如何影響設計。
• 檢視 hover 與 focus 等互動狀態，以及適用情況下的停用狀態。
• 在您支援的瀏覽器中開啟頁面，確認陰影不會遮擋內容或控制項。
• 預期像素密度、轉換、縮放、合成或元素形狀可能造成輕微的算繪差異。
• 以使用者的方式閱讀元件。如果陰影與文字競爭、讓表面更難理解，或暗示錯誤的狀態，請降低其強度。

微調設定並維持可重複的流程

可靠的初次嘗試應使用適度的偏移、比偏移更大的模糊、零或較小的擴散，以及較低的不透明度。每次只增加一個控制項，並觀察範例卡片與實際元件。這樣較容易找出造成視覺變化的值。

• 如果陰影消失，請檢查 alpha 值是否為零，以及擴散值是否足夠小。
• 如果邊緣太硬，請調整模糊。如果範圍有誤，請變更擴散，而不要將模糊視為替代方案。
• 此產生器會建立單一陰影圖層。合併以逗號分隔的圖層不在其範圍內，而且它不會產生 text-shadow、filter drop-shadow、elevation token、Tailwind class、設計系統變數或動畫關鍵影格。
• 此工具不會修改專案檔案，也不會在重新載入後保留設定，因此請將複製的宣告與您正在編輯的樣式保存在一起。

對於使用方塊陰影產生器的初學者而言，可靠的流程很簡單：產生、檢查、複製、貼上及測試。CSS 方塊陰影產生器會讓每個步驟清楚可見，而不會假裝自己是完整的設計系統。熟悉單一圖層的流程後，box-shadow 參數與配方速查表會提供一份簡明參考資料，供您嘗試更多變化。