在網頁設計中，我們常常會需要使用到各種不同形狀的圖形來進行美化，其中，中間有字圓角正方形是一個很常見的形狀。下面我們就來介紹一下如何使用CSS來制作這種形狀。
首先，我們需要創建一個圓角正方形的形狀。可以使用CSS的border-radius屬性來實現：
```css
.square {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
}
```
代碼解釋：這段CSS代碼會創建一個寬高均為100px的圓角正方形，并將邊框顏色設置為灰色（#ccc）。其中，border-radius: 50%的作用是將正方形的四個角變成圓角，直到成為一個圓形。
接著，我們需要在正方形中間添加文字。可以使用CSS的text-align和line-height屬性來實現：
```css
.square {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
```
代碼解釋：text-align: center的作用是將文字居中對齊，line-height: 100px的作用是將文字垂直居中對齊。
最后，我們來看一下完整的HTML和CSS代碼：
```html
``` 代碼解釋：首先是HTML代碼，使用了一個div元素，并給它添加了一個class屬性，這個class名稱為square。接著是CSS代碼，我們在里面使用了square class來進行樣式設置，包括寬高、邊框樣式和圓角半徑等，還添加了text-align和line-height屬性來讓文字居中對齊。 總體而言，中間有字圓角正方形的制作原理就是利用border-radius屬性來實現正方形到圓形的轉化，然后使用text-align屬性和line-height屬性來實現文字居中對齊。這樣，我們就可以用這種方式來美化頁面中的各種元素了。HTML代碼：
這是一段文字CSS代碼：
上一篇jquery dom添加
下一篇jquery dom案例