box-shadow ：
語法： box-shadow: h-shadow v-shadow blur spread color inset;
注意參數順序不要亂寫，盡量標准，避免不必要的bug
多個陰影間，逗號隔開
那第三個參數（模糊距離）和第四個參數（陰影尺寸）你能搞清楚他們的區別嗎？
於是，做下對比：
陰影尺寸：
可見，它相當於增加了border的寬度。但不是border哦，與border不同，box-shadow並不占據空間。在一些漸進增強的地方可以用。
模糊距離：
在這里根據他的表現形式，我又叫他模糊半徑。
他的效果是一個模糊的圓。
具體大小與數值的關系我沒去對比，按需調整。這里只是區分下樣式效果。
這是下面效果的效果圖：可以看出模糊距離出來是個圓的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .shadow { box-shadow:green 0 0 100px ; height: 100px; width: 100px; margin: 30px; float: left; } .shadow_inset{ box-shadow: 0 0 100px red inset ; height: 100px; width: 100px; margin: 30px; float: left; } </style> </head> <body> <div class="shadow"> 1 </div> <div class="shadow_inset"> 2 </div> </body>
</html>
