CSS3卡片樣式的設(shè)計(jì)是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的部分，其中凹凸樣式的使用非常流行。通過(guò)凹凸樣式的運(yùn)用，可以為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)不同層次的視覺(jué)效果，吸引用戶的注意力，增加用戶體驗(yàn)。

.card{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
transform: translateY(-20px);
}

上面這段代碼展現(xiàn)了CSS3卡片樣式的一種凹凸效果。box-shadow屬性實(shí)現(xiàn)了陰影的效果，X、Y方向陰影不太明顯，但是blur-radius值設(shè)成8px，可以很好地實(shí)現(xiàn)陰影效果，同時(shí)設(shè)置了透明度，更加符合現(xiàn)代風(fēng)格的審美。translation屬性實(shí)現(xiàn)了一個(gè)向上平移的效果，因此實(shí)現(xiàn)了“凹”的立體效果。

.card{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
transform: translateY(20px);
}

而這段代碼則參考上一段代碼，通過(guò)將translation屬性中的值改為20px，實(shí)現(xiàn)一個(gè)向下平移的效果，因此卡片具有了“凸”的立體效果。其他的值可以隨意調(diào)整，以達(dá)到最佳的效果。

綜上，CSS3卡片樣式凹凸效果可以很好地為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)視覺(jué)上的層次感，增強(qiáng)用戶體驗(yàn)。開(kāi)發(fā)過(guò)程中，可以模擬各種凹凸樣式的代碼，并手動(dòng)調(diào)整各個(gè)屬性的值，找到最佳的效果。