
如何用 css 实现圆角矩形
如图,我们想通过 css 实现一个类似这样的圆角矩形:
解决方案
立即学习“前端免费学习笔记(深入)”;
可以通过以下 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 代码创建圆角矩形:










