```html

2. **使用CSS添加样式：** 接下来，我们可以使用CSS来添加样式，使矩形拥有圆角效果。我们可以通过`border-radius`属性来设置矩形的圆角半径。例如：

```css .rectangle { width: 200px; height: 100px; background-color: #f0f0f0; border-radius: 10px; } ```

在这个例子中，我们设置了矩形的宽度和高度，并给矩形添加了背景颜色。通过设置`border-radius`为10px，我们让矩形的四个角都拥有了10px的圆角。

3. **调整圆角半径：** 通过改变`border-radius`属性的值，我们可以调整矩形的圆角半径，使得圆角更加圆润或者更加扁平。例如，如果我们将`border-radius`设置为50%，矩形的四个角将变成圆形。

```css .rectangle { width: 200px; height: 100px; background-color: #f0f0f0; border-radius: 50%; } ```

通过这种简单的方式，我们就可以创建出带有圆角的矩形。在实际的网页设计中，圆角矩形可以用于按钮、卡片、对话框等各种元素的设计中，让页面看起来更加友好和现代。同时，通过调整圆角半径的大小，我们可以根据设计需求来改变矩形的外观，使得设计更加灵活多样。

总的来说，使用CSS中的`border-radius`属性可以轻松实现带有圆角的矩形效果，为网页设计增添一种柔和、现代的视觉效果。希望以上内容对你有所帮助，祝你在网页设计中取得成功！