css中把边框设置成弧线

CSS中可以很方便地将边框设置成弧线，让页面的外观更加独特。一般情况下，我们使用border-radius属性来设置边框的弧度。

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px;
} 

在以上代码中，我们通过.box类来设置一个宽度为200像素，高度为100像素的矩形，并将边框设置为1像素的实线，颜色为#ccc。使用border-radius属性设置的值为10像素，这个值可以调整，决定弧线的形状。

如果我们希望将一个元素的四个角都设置为弧线，可以这样做：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px 10px 10px 10px;
} 

在以上代码中，border-radius属性设置的值为10像素，表示将元素的四个角都设置为弧线。其中数值的含义分别为左上角、右上角、右下角、左下角。

除了数值外，border-radius属性还能够接受百分比的值。例如，如果我们想要一个元素只有左下角和右下角是弧线，可以这样设置：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 0 0 50% 50%;
} 

在以上代码中，我们使用了百分比的值来设置元素的弧度，使得元素只有左下角和右下角是弧线，而左上角、右上角是直角。

通过使用border-radius属性，我们可以轻松地将元素的边框设置成弧线，使得页面更加美观。