CSS中有許多邊框樣式，其中邊框立體效果是一種非常炫酷的邊框效果。

.box {
width: 300px;
height: 200px;
border: 10px solid #ccc;
position: relative;
background: #fff;
}
.box::before, .box::after {
content: '';
position: absolute;
left: -10px;
top: -10px;
width: inherit;
height: inherit;
border: 10px solid #ccc;
transform: translateZ(-10px);
}
.box::before {
transform-origin: top left;
}
.box::after {
transform-origin: bottom right;
}

上面的代碼就是實現邊框立體效果的CSS代碼。我們通過為.box選擇器添加偽元素:before和:after來實現效果。通過設置元素的content為空字符串，讓它們不顯示任何內容。

接著，我們為這兩個偽元素設置絕對定位，并將寬度和高度均設置為inherit，這樣它們的寬度和高度就等于.box元素的寬度和高度。

然后，我們為偽元素添加10px的實線邊框，并將邊框顏色設置為#ccc。這時候，我們可以看到偽元素實心邊框覆蓋了.box元素的邊框。

為了產生立體效果，我們需要給偽元素設置transform: translateZ(-10px)。這樣，偽元素就會被沿z軸方向向后偏移10px，看起來就像是有一個向下的立體效果。

最后，我們給:before設置transform-origin: top left;，給:after設置transform-origin: bottom right;。這樣，我們就為偽元素設置了變換的基準點，讓它們沿著頂點和底點進行變換，從而產生更加真實的立體效果。

通過這些簡單的CSS代碼，我們就可以讓邊框立體化，為頁面增添炫酷的效果。