CSS中矩形變成圓角的方法有很多種，本文將介紹其中一種常用的方法，即使用CSS的`border-radius`屬性將矩形變成圓角。

在CSS中，`border-radius`屬性可以設置四個角的圓角大小。使用該屬性可以將矩形的四個角變成圓角。下面是一個使用`border-radius`屬性將矩形變成圓角的例子：

```html

<div class="rectangle-with-radius">

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

</div>

在上面的例子中，我們使用`div`元素來創建了一個矩形，并使用`class="rectangle-with-radius"`來定義該矩形的屬性。然后，我們使用`class="circle"`來創建了一個圓形元素，并使用`</div>`標簽將其與矩形元素分離。

現在，我們可以使用CSS的`border-radius`屬性來設置矩形的圓角大小。我們可以將`border-radius`設置為矩形寬度的百分比或像素值，如下所示：

```css

.rectangle-with-radius {

width: 200px;

height: 200px;

border-radius: 50%;

background-color: #fff;

在上面的例子中，我們使用`border-radius`將寬度設置為200像素，并將其轉化為百分比。這樣，我們設置矩形的圓角大小為200像素寬度的50%。

另外，我們也可以將`border-radius`設置為像素值，如下所示：

```css

.rectangle-with-radius {

width: 200px;

height: 200px;

border-radius: 100px 100px 0 0;

background-color: #fff;

在上面的例子中，我們使用`border-radius`將四個角的圓角大小分別設置為100像素、100像素、0像素和0像素。這樣，我們設置了一個矩形的圓角大小為100像素。

需要注意的是，當使用`border-radius`將矩形變成圓角時，矩形的高度和寬度將保持不變。這是因為CSS的`border-radius`只影響水平和垂直方向上的元素邊框大小，而不會影響元素的內部元素。

總之，使用CSS的`border-radius`屬性可以將矩形變成圓角，這可以幫助我們更好地設計和布局我們的網頁。