CSS 鏤空正方形是一種常用的設(shè)計(jì)元素，它常常用于網(wǎng)頁設(shè)計(jì)中以突出重要信息或創(chuàng)建獨(dú)特風(fēng)格的視覺效果。使用 CSS 制作鏤空正方形需要掌握一些基礎(chǔ)知識和技巧，下面讓我們一起來學(xué)習(xí)如何實(shí)現(xiàn)這項(xiàng)技術(shù)。

.square {
width: 100px;
height: 100px;
background-color: #f7f7f7;
border: 2px solid #333;
position: relative;
}
.square:before {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid #333;
}
.square:after {
content: "";
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 2px solid #333;
}

上面的代碼中，我們首先定義了一個(gè)名為 square 的 CSS 類。該類包含了一個(gè)寬高為 100px、背景色為 #f7f7f7、邊框?yàn)?2px 實(shí)線黑色邊框的 div 元素，并設(shè)置其 position 屬性為 relative，為后續(xù)使用絕對定位做準(zhǔn)備。

接著，我們使用實(shí)心邊框和內(nèi)邊距分別定義了兩個(gè)偽元素 before 和 after。偽元素 before 的作用是在 div 元素的外側(cè)繪制一個(gè)和 square 元素尺寸相同的邊框，并將其位置設(shè)置到 div 元素的正上方，使其覆蓋 div 元素的實(shí)線邊框，并呈現(xiàn)出鏤空效果。同樣，偽元素 after 的作用是在 div 元素的內(nèi)側(cè)繪制一個(gè)尺寸比 div 元素本身略小的邊框（距離邊界為 8px），并呈現(xiàn)出內(nèi)嵌的效果。

通過以上代碼，我們實(shí)現(xiàn)了一個(gè)簡單的 CSS 鏤空正方形。我們可以通過靈活運(yùn)用 CSS 偽元素和實(shí)線邊框等特性來實(shí)現(xiàn)更多樣化的設(shè)計(jì)效果。