如何在渐变背景中添加一个90px×90px的彩色圆形？

你可以通过两种简单方式实现中间添加彩色圆形的效果：

方法一：使用伪元素（结构更灵活） #

给容器设置相对定位，通过::before伪元素创建圆形并居中：

.fence {
  width: 640px;
  height: 340px;
  background:
    linear-gradient(45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px);
  background-size: 10px 10px;
  position: relative; /* 让伪元素基于此容器定位 */
}

.fence::before {
  content: "";
  width: 90px;
  height: 90px;
  background-color: #ff5722; /* 自定义圆形颜色 */
  border-radius: 50%; /* 转为圆形 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现完美居中 */
}

<div class="fence"></div>

方法二：多层背景叠加（无需额外元素） #

直接在background属性中添加径向渐变层，与原有背景叠加：

.fence {
  width: 640px;
  height: 340px;
  background:
    radial-gradient(circle, #ff5722 0 90px, transparent 90px), /* 中间圆形层 */
    linear-gradient(45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      blue 0 7.5px,
      #0000 0 10px);
  background-size: 100% 100%, 10px 10px, 10px 10px; /* 分别定义各层尺寸 */
  background-position: center; /* 圆形居中显示 */
}

<div class="fence"></div>

两种方法都能达到需求：伪元素方法后续给圆形加交互、动画更方便；多层背景法更简洁，无需额外DOM元素，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者user17631451