css使用before和after写圆

在CSS中，你可以利用伪元素 `::before` 和 `::after` 来在元素的前面或后面添加内容，并通过定位和形状属性创建圆形元素。这里是一个基本的示例：

/* 定义一个样式用于创建圆 */
.rounded-edge {
  position: relative; /* 确保元素可以作为定位父级 */
}

.rounded-edge::before,
.rounded-edge::after {
  content: ""; /* 创建空的内容 */
  display: block;
  width: 50px; /* 圆形半径 */
  height: 50px; /* 圆形半径 */
  border-radius: 50%; /* 设置圆角 */
  background-color: #ccc; /* 圆的颜色 */
  position: absolute; /* 都是绝对定位 */
}

.rounded-edge::before { /* 上方圆形 */
  top: -25px;
  left: 50%;
  transform: translateX(-50%); /* 将圆居中 */
}

.rounded-edge::after { /* 下方圆形 */
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

在这个例子中，`.rounded-edge` 类的任何元素将会在其上方和下方显示两个圆形。通过调整 `top`, `bottom`, `left` 或 `right` 的值以及 `transform` 属性，你可以根据需要更改圆的位置。