CSS中矩形變成圓角的方法有很多種，本文將介紹其中一種常用的方法，即使用CSS的`border-radius`屬性將矩形變成圓角。
在CSS中，`border-radius`屬性可以設(shè)置四個(gè)角的圓角大小。使用該屬性可以將矩形的四個(gè)角變成圓角。下面是一個(gè)使用`border-radius`屬性將矩形變成圓角的例子：
```html
<div class="rectangle-with-radius">
<div class="circle"></div>
</div>
在上面的例子中，我們使用`div`元素來(lái)創(chuàng)建了一個(gè)矩形，并使用`class="rectangle-with-radius"`來(lái)定義該矩形的屬性。然后，我們使用`class="circle"`來(lái)創(chuàng)建了一個(gè)圓形元素，并使用`</div>`標(biāo)簽將其與矩形元素分離。
現(xiàn)在，我們可以使用CSS的`border-radius`屬性來(lái)設(shè)置矩形的圓角大小。我們可以將`border-radius`設(shè)置為矩形寬度的百分比或像素值，如下所示：
```css
.rectangle-with-radius {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
在上面的例子中，我們使用`border-radius`將寬度設(shè)置為200像素，并將其轉(zhuǎn)化為百分比。這樣，我們?cè)O(shè)置矩形的圓角大小為200像素寬度的50%。
另外，我們也可以將`border-radius`設(shè)置為像素值，如下所示：
```css
.rectangle-with-radius {
width: 200px;
height: 200px;
border-radius: 100px 100px 0 0;
background-color: #fff;
在上面的例子中，我們使用`border-radius`將四個(gè)角的圓角大小分別設(shè)置為100像素、100像素、0像素和0像素。這樣，我們?cè)O(shè)置了一個(gè)矩形的圓角大小為100像素。
需要注意的是，當(dāng)使用`border-radius`將矩形變成圓角時(shí)，矩形的高度和寬度將保持不變。這是因?yàn)镃SS的`border-radius`只影響水平和垂直方向上的元素邊框大小，而不會(huì)影響元素的內(nèi)部元素。
總之，使用CSS的`border-radius`屬性可以將矩形變成圓角，這可以幫助我們更好地設(shè)計(jì)和布局我們的網(wǎng)頁(yè)。