html - 插图框阴影显示周围的边框，需要将其隐藏

我用css创建了一个div使其成为圆形，并添加了内框阴影

.circle {
  width: 690px;
  height: 690px;
  background: #000;
  border-radius: 50%;
  box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
  position: absolute;
  left: -100px;
  top: -100px;
}

<div class="circle"></div>

最佳答案

添加一个小填充并调整background-clip：

.circle {
  width: 690px;
  height: 690px;
  background: #000;
  border-radius: 50%;
  box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
  padding: 1px;
  background-clip: content-box;
  position: absolute;
  left: -100px;
  top: -100px;
}

<div class="circle"></div>

您也可以使用radial-gradient重新创建：

.circle {
  width: 690px;
  height: 690px;
  background: radial-gradient(#000 57%,transparent 70%);
  border-radius: 50%;
  position: absolute;
  left: -100px;
  top: -100px;
}

<div class="circle"></div>

关于html - 插图框阴影显示周围的边框，需要将其隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51487394/