css带弧度的长方形

CSS中有一种属性可以让我们制作出带有弧度的长方形，就是border-radius属性。

.container {
  border-radius: 10px;
  width: 300px;
  height: 150px;
  background-color: #f2f2f2;
}

上面的代码是一个容器的样式，我们使用border-radius属性来设置圆角的大小，单位为像素。这个属性可以接受一个值，来设置四个角的圆角半径大小，也可以接受两个值，一个值定义左上角和右下角的圆角半径大小，另一个值则定义右上角和左下角的圆角半径大小。

如果我们想要实现更复杂的圆角效果，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius这四个属性单独设置每个角的圆角半径大小。

.container {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
  width: 300px;
  height: 150px;
  background-color: #f2f2f2;
}

在上面的代码中，我们对每个角单独设置了圆角半径大小，实现了更复杂的弧度效果。

总之，border-radius属性是制作带有弧度的长方形的必备属性之一，掌握它的用法可以让我们的页面更加美观。