このラジアルグラデーションの境界線と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. -->