CSS中，鏤空效果是一種常見(jiàn)的元素展示手法，可以使某個(gè)元素呈現(xiàn)出只有邊框而沒(méi)有實(shí)體的效果。

實(shí)現(xiàn)這種效果主要是基于CSS的邊框?qū)傩詁order，通過(guò)設(shè)置不同的屬性值來(lái)控制邊框的樣式、顏色、寬度等，進(jìn)而達(dá)到鏤空的效果。

/*實(shí)現(xiàn)一個(gè)四邊均有邊框的盒子，并設(shè)置其中心部分為空白*/
.empty-box{
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
background-color: #eee;
box-sizing: border-box;
}
.empty-box .center{
width: 100%;
height: 100%;
border: 1px solid transparent;
}

如上代碼所示，先定義了一個(gè)大小為300x200px的盒子，并設(shè)置四周的邊框?yàn)?px實(shí)心線(xiàn)，同時(shí)添加了一定的內(nèi)邊距和背景顏色。接下來(lái)在盒子內(nèi)部添加一個(gè)類(lèi)名為.center的元素，并設(shè)置它的寬高為100%，同時(shí)將邊框?qū)挾仍O(shè)置為1px。但是這里特別的地方在于設(shè)置了邊框顏色為透明，這樣就使中心部分看起來(lái)是空白的了，形成了鏤空效果。

當(dāng)然，CSS也提供了其他的邊框樣式供選擇，如虛線(xiàn)、點(diǎn)狀線(xiàn)等，只需要在邊框?qū)傩灾性O(shè)置相應(yīng)的值即可。同時(shí)，也可以通過(guò)偽元素的方式實(shí)現(xiàn)更加靈活的鏤空效果，如利用:before和:after來(lái)為元素添加特殊的邊框效果，具體代碼實(shí)現(xiàn)與前面也有些許不同，但思路類(lèi)似，需要加以掌握。