在 CSS 中，添加投影效果可以讓元素看上去有立體感，讓頁面更加生動。而投影效果通常是通過 box-shadow 屬性來實現(xiàn)的。

box-shadow 是用來設(shè)置元素的投影效果。它需要接受多個值來定義投影的屬性，例如 inset、X 偏移、Y 偏移、模糊半徑和顏色。以下是一個例子：

.box {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

上述代碼會為元素加上一個 2px 的黑色陰影，該陰影具有 5px 的模糊半徑，而陰影的透明度為 0.3。

除了基礎(chǔ)的單個陰影外，box-shadow 還可以接受多個值來定義多個投影效果。例如，以下代碼會為元素創(chuàng)建兩個投影效果：

.box {
box-shadow:
2px 2px 5px rgba(0, 0, 0, 0.3),
-2px -2px 5px rgba(255, 255, 255, 0.3);
}

上述代碼會為元素創(chuàng)建一個黑色陰影和一個白色陰影，它們在 X 和 Y 方向上相互相反。

最后，box-shadow 的 inset 關(guān)鍵字可以用來創(chuàng)建內(nèi)陰影，而不是外陰影。例如，以下代碼會為元素創(chuàng)建一個內(nèi)陰影：

.box {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

上述代碼會為元素創(chuàng)建一個黑色內(nèi)陰影，該陰影也具有 5px 的模糊半徑。

在設(shè)計網(wǎng)頁樣式時，投影效果可以很好地增強元素的層次感和立體感，使得頁面更加引人注目。因此，我們應(yīng)當(dāng)熟練掌握 box-shadow 屬性的使用方法，以便在實際開發(fā)中使用它來實現(xiàn)更加出色的界面效果。