CSS小圓圈如何變成方框

在CSS中，我們可以使用border-radius屬性將元素從圓形變?yōu)榉叫?，這個屬性允許我們設置元素的圓角半徑，當半徑設置為0時，元素就會呈現為方形。

下面是一個簡單的示例，展示如何將一個圓形按鈕變成方形按鈕：

HTML代碼：

<div class="circle-button"></div>

CSS代碼：

.circle-button {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 50%; /* 圓形按鈕 */
}
.square-button {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 0; /* 方形按鈕 */
}

在這個示例中，我們定義了兩個樣式類。circle-button類用于創(chuàng)建一個圓形按鈕，而square-button類則用于創(chuàng)建一個方形按鈕，關鍵在于border-radius屬性的值，當設置為50%時，元素呈現為圓形；當設置為0時，元素呈現為方形。