CSS是前端開發(fā)中非常重要的一門技能，它可以使我們的網(wǎng)頁更加美觀和具有交互性。實現(xiàn)正方形div也是CSS技能中的一個常見問題，下面我們就來看一下如何使用CSS實現(xiàn)正方形div。

//CSS代碼
.square {
width: 100px;
height: 100px;
background-color: #f00;
}

上述代碼是實現(xiàn)正方形div的最基礎(chǔ)的CSS樣式。我們設(shè)置了正方形的寬高都為100px，并且設(shè)置了背景色為紅色。接下來我們可以根據(jù)實際需求對這個樣式進行修改和擴展。

如果我們需要給這個正方形添加邊框，可以使用border屬性來實現(xiàn)：

//CSS代碼
.square {
width: 100px;
height: 100px;
background-color: #f00;
border: 1px solid #000;
}

上述代碼中，我們使用了border屬性來設(shè)置了一個1px的黑色邊框。

如果我們需要讓這個正方形居中顯示，可以使用margin屬性來實現(xiàn)：

//CSS代碼
.square {
width: 100px;
height: 100px;
background-color: #f00;
border: 1px solid #000;
margin: 0 auto;
}

上述代碼中，我們使用了margin屬性來設(shè)置了水平居中。

如果我們需要讓這個正方形變成圓形，可以使用border-radius屬性來實現(xiàn)：

//CSS代碼
.square {
width: 100px;
height: 100px;
background-color: #f00;
border: 1px solid #000;
margin: 0 auto;
border-radius: 50%;
}

上述代碼中，我們使用了border-radius屬性將這個正方形變成了一個圓形。

如此便順利地實現(xiàn)了通過CSS實現(xiàn)正方形div的效果。