如何使用 CSS 实现圆角矩形？

如何用 css 实现圆角矩形

<p>如图，我们想通过 css 实现一个类似这样的圆角矩形：</p>

<p></p>

解决方案

可以通过以下 css 代码实现：

p {
  width: 200px;
  height: 100px;
  background-color: blue;
  border-radius: 50px;
}

详解

• width 和 height 属性定义了元素的宽和高。
• background-color 属性设置背景色。
• border-radius 属性用于创建圆角，其值为弧度半径的像素值。50px 的半径会产生一个圆形边角。

示例

[codepen示例](https://codepen.io/chauncywu/pen/eybqoqr)演示了如何使用此 css 代码创建圆角矩形：