在CSS中，可以通過陰影效果增強網頁盒子的視覺效果。盒子陰影效果可以讓網頁看上去更具有質感，并且使得頁面元素更加鮮明。在使用盒子陰影效果時，我們需要使用一個特殊的CSS屬性：box-shadow。

.box{
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們定義了一個盒子大小為200*200px，并設置了一個白色背景色。通過box-shadow屬性，我們定義了一個水平偏移量為0px，一個垂直偏移量為0px，一個模糊距離為10px，一個陰影顏色為rgba(0,0,0,0.5)。這里的rgba(0,0,0,0.5)表示黑色的陰影透明度為50%。

值得注意的是，我們使用box-shadow屬性的時候需要注意瀏覽器兼容性問題。不同瀏覽器的支持程度差別很大，但是我們可以通過前綴的方式來解決兼容性問題。下面是一個兼容不同瀏覽器的代碼。

.box{
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

最后，我們來看一下如何讓一個盒子同時有內外陰影效果。在CSS中，我們可以使用兩個屬性來實現這個效果，分別是box-shadow和inset。在使用inset屬性后，將會展現出內陰影效果。下面是代碼示例。

.box{
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

以上就是CSS盒子陰影效果的基本內容。我們可以在實際應用中嘗試不同的陰影效果，來達到更加豐富的頁面效果。