實現這個效果主要是用了background-image 結合徑向漸變radial-gradient。
示例：
background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%);
而對於徑向漸變，主要是3個參數控制。
一個是原點和大小。大小類似border-radius的感覺，原點使用at表示可以指定點的坐標，或使用left、right、top、bottom來表示。
其次是兩個顏色和透明度、大小等。這里50px或百分比，親測第一個只有50才是半圓角，而第二個50%貌似影響不大。
下面是代碼：
<style> p{ margin:0; padding:0; } .top-box{ width:100%; height:200px; background: red; position: relative; margin-bottom:20px; border-radius: 4px 4px 0 0; } .bottom-box{ width:100%; height:100px; background: #fff; position: relative; border-radius: 0 0 4px 4px; } .top-box p,.bottom-box p{ width: calc(100% - 20px); height:10px; position:absolute; left: 10px; } .top-box p{ background: red; bottom: -10px; } .bottom-box p{ background: #fff; top: -10px; } .top-box p::before,.bottom-box p::before{ content:''; position:absolute; width: 10px; height: 10px; left:-10px; } .top-box p::after,.bottom-box p::after{ content:''; position:absolute; width: 10px; height: 10px; right:-10px; } .top-box p::before{ background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%); } .top-box p::after{ background-image: radial-gradient(circle 10px at 100% 100%, transparent 50px, red 50%); } .bottom-box p::before{ background-image: radial-gradient(circle 10px at 0 0, transparent 50px, #fff 50%); } .bottom-box p::after{ background-image: radial-gradient(circle 10px at 100% 0, transparent 50px, #fff 50%); } </style> <div id="modal"> <div class="mask"></div> <div class="wrap"> <div class="top-box"> <p></p> </div> <div class="bottom-box"> <p></p> </div> </div> </div> 最后補充一下徑向漸變radial-gradient() 函數的知識點
語法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
作者：Sun____
鏈接：https://www.jianshu.com/p/1b0ec60dae85
https://blog.csdn.net/qq_20777797/article/details/104213460