CSS3中提供了一種非常炫酷的效果——立體圓角。立體圓角能使元素看起來更加立體化和有深度感，讓網(wǎng)頁的整體呈現(xiàn)出更加生動(dòng)和搶眼的效果。

要實(shí)現(xiàn)立體圓角，首先需要為元素設(shè)置border-radius屬性。這個(gè)屬性表示元素邊角的弧度值，設(shè)置為50%則表示元素是一個(gè)圓形。

.box {
width: 200px;
height: 200px;
border-radius: 50%;
}

當(dāng)我們?cè)谠厣显O(shè)置好border-radius后，在增加一個(gè)額外的偽元素:before，并設(shè)置樣式。通過在偽元素上設(shè)置box-shadow來生成一個(gè)簡單的投影效果。這個(gè)投影效果讓元素看起來不再是扁平的了！

.box:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(186,186,186,0.5);
z-index: -1;
}

最后，再為元素增加一個(gè)文本內(nèi)容。有了以上三步，一個(gè)簡單的立體圓角元素就完成了！

.box {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 36px;
font-weight: bold;
}
.box:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(186,186,186,0.5);
z-index: -1;
}

結(jié)語：立體圓角可以讓網(wǎng)頁看起來更加生動(dòng)和有趣，使用一個(gè)簡單的偽元素就可以輕松實(shí)現(xiàn)這個(gè)效果。試試在你的網(wǎng)頁中添加一些立體化的元素，讓你的網(wǎng)頁更加炫目吧！