CSS 陰影產生器
免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
什麼是 CSS box-shadow？
CSS box-shadow 是一個 CSS 屬性，用於在元素框架周圍新增陰影效果。它允許你透過指定偏移、模糊半徑、擴展半徑和顏色值來建立投影、內陰影和多層陰影。
box-shadow 有哪些參數？
box-shadow 屬性接受多個值：水平偏移（X）、垂直偏移（Y）、模糊半徑、擴展半徑、顏色以及可選的 inset 關鍵字。你還可以用逗號分隔指定多個陰影。
inset 關鍵字是什麼？
inset 關鍵字將陰影從外部陰影（投影）變為內部陰影。當指定 inset 時，陰影會繪製在元素邊框內部而不是外部，產生內嵌效果。
什麼是模糊半徑？
模糊半徑決定陰影邊緣的模糊程度。值為 0 時建立清晰、堅實的邊緣。較大的值會建立更擴散、更柔和的陰影，從元素延伸得更遠。
什麼是擴展半徑？
擴展半徑擴大或縮小陰影尺寸。正值使陰影比元素更大，負值使陰影更小。這會影響套用模糊之前的陰影大小。
如何建立多重陰影？
你可以透過用逗號分隔每個陰影定義來建立多重陰影。每個陰影可以有不同的偏移、模糊、擴展和顏色值。陰影按宣告順序套用，第一個陰影在最上層。
可以使用 RGBA 顏色嗎？
可以，你可以使用任何 CSS 顏色格式，包括 RGBA、HSLA、HEX 或命名顏色。RGBA 和 HSLA 特別適合建立與背景自然融合的半透明陰影。
如何複製生成的 CSS 程式碼？
只需點擊產生器介面中的「複製程式碼」按鈕。CSS 程式碼將被複製到剪貼簿，可以直接貼上到樣式表或 HTML 檔案中。
box-shadow 在所有瀏覽器中都支援嗎？
是的，box-shadow 在所有現代瀏覽器中都受支援，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 2011 年以來它一直是 CSS3 的一部分，具有出色的瀏覽器相容性。
box-shadow 會影響效能嗎？
box-shadow 對現代瀏覽器的效能影響很小。但是，在許多元素上使用具有大模糊半徑的多個複雜陰影可能會影響渲染效能，尤其是在行動裝置上。
box-shadow 的常見用途有哪些？
常見用途包括建立卡片懸浮效果、為按鈕新增深度、建立內嵌表單欄位、實現 Material Design 陰影效果，以及在重疊元素之間新增視覺分隔。
可以動畫化 box-shadow 嗎？
可以，box-shadow 可以使用 CSS 過渡或動畫進行動畫化。但是，動畫化 box-shadow 可能會消耗較多效能。為了獲得更好的效能，考慮使用偽元素配合不透明度過渡。