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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何使用 CSS 实现圆角矩形？》，聊聊，希望可以帮助到正在努力赚钱的你。

如何用 css 实现圆角矩形

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

<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 代码创建圆角矩形：

理论要掌握，实操不能落！以上关于《如何使用 CSS 实现圆角矩形？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！