javascript - 我想为这个径向渐变和 div 生成边框

Question

这是我的代码。

div {
  height: 150px;
  margin: 5em 2em;
  background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black);
  border-radius: 8p## Heading ##x;
  position: relative;
}

.circle {
  width: 120px;
  height: 120px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url(http://www.fillmurray.com/1000/1000);
  background-size: cover;
}

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

<!--  this creates the cut in a div placing a circle on the cut and i need to put a border for the whole div even in the cut part of div.  -->

Answer 1

你的意思是这样的吗？

div {
  height: 150px;
  margin: 5em 2em;
  background: radial-gradient(circle at top center, transparent, green 70px, black 70px, black);
  border-radius: 8p## Heading ##x;
  position: relative;
  border: 10px solid green;
}

.circle {
  width: 120px;
  height: 120px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url(http://www.fillmurray.com/1000/1000);
  background-size: cover;
}

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

<!--  this creates the cut in a div placing a circle on the cut and i need to put a border for the whole div even in the cut part of div.  -->