CSS中的邊框和陰影都可以用來美化網頁中的各種元素，不過很多人卻不知道，邊框和陰影的兩邊可以不一樣。

.box {
border: 5px solid #000;
box-shadow: 10px 10px 5px #888888, -10px -10px 5px #888888;
}

上述代碼中，.box選擇器定義了一個元素，其邊框為5像素寬的黑色實線。而box-shadow屬性則定義了兩個陰影，一個在元素的右下角，另一個在左上角，二者顏色相同但方向相反，形成對稱的效果。

如果想要讓邊框和陰影的兩邊更豐富多彩，可以使用CSS3的多重陰影和多重邊框屬性。比如：

.box {
border: 5px solid #000;
border-top-color: #ff0000;
border-right-color: #00ff00;
border-bottom-color: #0000ff;
border-left-color: #ff00ff;
box-shadow: 10px 10px 5px #888888, -10px -10px 5px #888888, 0 0 10px #ffff00;
}

上述代碼中，.box選擇器定義了一個元素，其邊框為5像素寬的黑色實線，并且邊框的四個方向分別設置了不同的顏色，形成了一個彩虹般的邊框效果。而box-shadow屬性則定義了三個陰影，一個在元素的右下角，另一個在左上角，第三個陰影設置了一個黃色的發光效果。

通過對邊框和陰影的細致設計，可以讓網頁中的各種元素更加立體、更加美觀。不過需要注意的是，太多的純CSS效果會使網頁加載速度變慢，要在充分考慮優化的前提下進行使用。