CSS中除了可以呈現平面效果外，還可以設計出立體的效果。下面我們來介紹一種用CSS實現笑臉立體方框效果的方法。

.face{
width: 120px;
height: 120px;
border-width: 20px;
border-style: solid;
border-color: #000 #000 yellow #000;
border-radius: 50%;
transform-style: preserve-3d;
transform: translateY(-20%) rotateX(50deg);
}
.face:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
border-width: 20px;
border-style: solid;
border-color: #000 yellow #000 #000;
border-radius: 50%;
transform-style: preserve-3d;
transform: translateY(20%) rotateX(-50deg);
}

以上是CSS代碼的實現，我們來逐一解釋一下。

首先，我們定義了一個class為face的元素，寬高均為120px，并設置邊框寬度為20px、樣式為實線，分別設置上、右、下的顏色為黑色、左邊的顏色為黃色，邊框圓角為50%。由于我們要實現立體效果，因此需要添加transform-style屬性，并將值設置為preserve-3d。接著，我們給這個元素設置了一個垂直方向上的偏移量（translateY）和一個X軸方向上的旋轉（rotateX）。

緊接著，我們為.face元素的after偽元素也定義了樣式。和.face元素的樣式類似，我們將邊框顏色調換位置，且這里的偏移量方向為正，旋轉方向與.face相反，目的是為了形成一個立體的立體效果。

這里的細節要點是，需要在.face元素和其偽元素均設置transform-style屬性，確保子元素繼承父元素的實體的3D屬性。

通過上述簡單的代碼，我們就可以使用CSS實現笑臉立體方框效果啦！