，我們需要了解box-shadow屬性的語法和取值。box-shadow通常由四個參數組成，分別為水平偏移量、垂直偏移量、模糊半徑和擴展半徑。其中，水平偏移量決定陰影相對元素框的水平位置；垂直偏移量決定陰影相對元素框的垂直位置；模糊半徑決定陰影的模糊程度；擴展半徑決定陰影的大小范圍。
下面我們來看一個簡單的示例：
<div style="width: 200px; height: 200px; background-color: #f1f1f1; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);"></div>
在這個示例中，我們創建了一個寬高為200px的div元素，并設置了背景顏色為#f1f1f1。通過設置box-shadow屬性，我們給這個元素添加了一個水平偏移量為10px，垂直偏移量為10px，模糊半徑為20px的陰影效果。陰影的顏色為rgba(0, 0, 0, 0.2)，其中rgba表示陰影的顏色值，最后一個參數0.2表示陰影的透明度。
除了使用固定數值來設置陰影效果外，我們還可以使用關鍵字來控制陰影的位置和大小。下面是一個使用關鍵字設置陰影效果的示例：
<div style="width: 200px; height: 200px; background-color: #f1f1f1; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);"></div>
在這個示例中，我們將水平偏移量和垂直偏移量都設置為0，使陰影與元素框重合。模糊半徑設置為10px，擴展半徑設置為5px。通過調整這兩個參數的值，我們可以控制陰影的大小和模糊程度。
此外，box-shadow屬性還支持多重陰影效果。我們可以通過使用逗號將多個陰影設置進行分隔，并按照設置順序應用各個陰影效果。下面是一個使用多重陰影效果的示例：
<div style="width: 200px; height: 200px; background-color: #f1f1f1; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2), -10px -10px 10px rgba(0, 0, 0, 0.2);"></div>
在這個示例中，我們使用逗號將兩個陰影設置進行分隔。第一個陰影設置為水平偏移量為10px，垂直偏移量為10px，模糊半徑為10px的陰影；第二個陰影設置為水平偏移量為-10px，垂直偏移量為-10px，模糊半徑為10px的陰影。這樣，我們可以同時為元素添加多個陰影效果。
通過上述幾個代碼案例的介紹，我們了解了div加投影的基本用法和一些常用設置。通過合理地使用box-shadow屬性，我們可以為HTML元素添加立體、懸浮等效果，使頁面的視覺效果更加豐富。