CSS3 box-shadow 屬性用來描述一個元素的一個或多個陰影效果，該屬性幾乎可以讓你完成你想要的任何陰影效果。然而 box-shadow 屬性語法和取值非常靈活，對於新手有點不容易理解。今天總結一下語法和 box-shadow 屬性各種陰影效果。

CSS 程式碼:

取值說明：

• inset: 預設陰影在邊框外。使用 inset 後，陰影在邊框內（即使是透明邊框），背景之上內容之下。也有些人喜歡把這個值放在最後，瀏覽器也支援。
• <offset-x> <offset-y>: 這是頭兩個<length>值，用來設定陰影偏移量。<offset-x>
  設定水平偏移量，如果是負值則陰影位於元素左邊。<offset-y>設定垂直偏移量，如果是負值則陰影位於元素上面。可用單位請檢視<length>。如果兩者都是0，那麼陰影位於元素後面。這時如果設定了<blur-radius>或<spread-radius>則有模糊效果。
• <blur-radius>: 這是第三個<length>值。值越大，模糊面積越大，陰影就越大越淡。 不能為負值。預設為0，此時陰影邊緣銳利。
• <spread-radius>: 這是第四個<length>值。取正值時，陰影擴大；取負值時，陰影收縮。預設為0，此時陰影與元素同樣大。
• <color>: 相關事項檢視<color>。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。

網上找了幾張圖，大家可以對應的看一下，更加好理解。

再說的具體一點：

最簡單的常規效果

下面是一些最簡單的陰影效果，看程式碼也應該非常容易理解：

轉載自：https://www.html.cn/archives/9360/