css中如何把正方形變成圓形

css中把正方形變成圓形的方法：先新建一個html範例檔；然後在body標籤中輸入div標籤，並且在div標籤上加上一個類別名稱；最後透過新增屬性為「border- radius:150px」即可把正方形變成圓形。

本教學操作環境：Dell G3電腦、Windows7系統、PhpStorm 2019.3.1 x64&&HTML5&&css3版本。

推薦：《css影片教學》

新建一個將正方形變成圓形.html 文件，如圖所示：

輸入HTML5的結構程式碼，將title標籤裡面的內容修改成：將正方形變成圓形，如圖所示：

在body標籤中輸入div標籤，並且為div標籤新增一個類別名稱(box)，如圖所示：

為類別名稱(box)新增CSS屬性，讓其變成一個正方形，如圖所示：

#新增一個CSS屬性，程式碼：border-radius:150px，如圖所示：

#運行網頁，可以看到正方形已經變成了圓形，如圖所示：

#

以上是css中如何把正方形變成圓形的詳細內容。更多資訊請關注PHP中文網其他相關文章！