CSS中的陰影效果可以在元素的邊框上或者內部實現。通過使用box-shadow屬性，可以在邊框的外部創建陰影，并使用inset關鍵字在邊框內部創建陰影。以下是關于如何給元素的邊框內外都加陰影的方法。

.box{
width: 200px;
height: 150px;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px #ddd;
-webkit-box-shadow: 0px 0px 10px #ddd;
-moz-box-shadow: 0px 0px 10px #ddd;
}
.box-inset{
width: 200px;
height: 150px;
border: 1px solid #ddd;
box-shadow: inset 0px 0px 10px #ddd;
-webkit-box-shadow: inset 0px 0px 10px #ddd;
-moz-box-shadow: inset 0px 0px 10px #ddd;
}

首先創建一個名稱為.box的class，給元素添加1像素的灰色邊框，并使用box-shadow屬性添加灰色的外部陰影。這將在元素周圍創建一圈陰影。

然后，創建另一個名稱為.box-inset的class，它與.box相似，但在這里使用inset關鍵字將陰影放置在邊框內部。

無論是.box還是.box-inset，都可以使用瀏覽器前綴添加廠商前綴，以實現瀏覽器兼容性。

完成上述操作后，就可以很容易地給元素添加內外陰影了。這顯然可以提高元素的視覺吸引力，并為設計師提供更多自由度。