CSS裏面的屬性很多，有些屬性長時間不用，就容易忘，尤其是那種需要設置多個值的屬性。比如：box-shadow，每次使用CSS3裏的box-shadow,都記不清box-shadow怎麼使用，都要查閱資料才能實現對應的效果,現在總結一下,box-shadow的使用方法以及box-shadow內陰影的使用，方便以後查看。
相關推薦：
一、box-shadow語法
box-shadow: none | inset（可選值，不設置，爲外投影，設置，爲內投影） x-offset（陰影水平偏移量，正方向爲right） y-offset（陰影垂直偏移量，正方向爲bottom） blur-radius（陰影模糊半徑，爲正，0爲無模糊效果，值越大，越模糊） spread-radius（陰影擴展半徑，可正可負） color（設置對象的陰影的顏色）
前端10K面試準備，最完整面試真題分享（含答案）！
屬性值描述:
1.陰影類型：此參數可選，默認的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影
2. X-offset:是指陰影水平偏移量,其值可正可負，正值，則陰影在對象的右邊，負值，陰影在對象的左邊
3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負值，正值，陰影在對象的底部，負值時，陰影在對象的頂部
4.陰影模糊半徑：此參數是可選，只能爲正值，如果其值爲0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊
5. 陰影擴展半徑：此參數可選，其值可爲正負值，正值，則整個陰影都延展擴大，反之，則縮小
6.陰影顏色：此參數可選，不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
注：多層陰影，最內層優先級最高，之後依次降低。使用逗號“，”隔開。
二、box-shadow的實際運用
舉例1：不設置X軸與Y軸，設置值陰影模糊半徑爲15px, 它會在本身發生作用 半徑範圍，顏色。
box-shadow: 0 0 15px #f00;
效果圖：
舉例2： X軸與Y軸設爲正值（正值 X軸向右 Y軸向下）
box-shadow:4px 4px 15px #f00;
效果圖：
舉例3：box-shadow：inset 即box-shadow內部陰影，與上面寫法相同 唯一不同的是添加了一個inset
box-shadow:0 0 15px #f00 inset;效果圖：
舉例4：設置正方形的四邊顏色都不一樣，但是陰影模糊半徑都爲10px
box-shadow:-10px 0px 10px red, /*左邊陰影*/ 0px -10px 10px black, /*上邊陰影*/ 10px 0px 10px green, /*右邊陰影*/ 0px 10px 10px blue;" /*下邊陰影*/ >
效果圖：
以上介紹了CSS3裏的box-shadow怎麼使用，box-shadow：inset內部陰影怎麼使用，以及box-shadow的實際運用。至於box-shadow周圍設置什麼樣的效果，還要看具體要求。
以上就是分享CSS3裏box-shadow屬性的使用方法，包括內陰影box-shadow：inset的詳細內容，更多請關注我！!