您可以使用单个元素（加上伪元素）来完成此操作，
radial-gradient而伪元素会创建圆，而父元素将背景用作背景。
div:before { position: absolute; content: ''; width: 90px; height: 90px; top: -75px; left: calc(50% - 45px); background-color: red; border-radius: 50%;}div { position: relative; margin: 100px auto 0 auto; width: 90%; height: 150px; border-radius: 6px; background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); }body,html { font-size: 18px;}body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}<div></div>
