在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常會(huì)遇到需要使用方塊的場(chǎng)景，這時(shí)候我們可以使用CSS來(lái)實(shí)現(xiàn)。下面就來(lái)講一下如何使用CSS來(lái)寫(xiě)方塊。

.square {
width: 100px;
height: 100px;
background-color: red;
}

代碼中的".square"是一個(gè)類(lèi)選擇器，用來(lái)選中我們需要進(jìn)行樣式設(shè)置的元素。接著我們?cè)O(shè)置了方塊的寬度和高度都為100像素，并且用紅色作為方塊的背景色。

如果我們想要讓方塊有一些圓角怎么辦？可以使用CSS3中的"border-radius"屬性，如下：

.rounded-square {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10px;
}

代碼中的".rounded-square"同樣是一個(gè)類(lèi)選擇器，接著我們添加了"border-radius"屬性。這個(gè)屬性用來(lái)控制元素的圓角程度，這里設(shè)置為10像素。

其實(shí)用CSS寫(xiě)方塊的方法還有很多，比如通過(guò)添加邊框、使用偽類(lèi)等等。但是以上提到的兩種方式足夠滿(mǎn)足大多數(shù)需求。不管是做網(wǎng)頁(yè)還是移動(dòng)端APP開(kāi)發(fā)，方塊是一個(gè)基礎(chǔ)的組件，相信大家一定會(huì)用得到。