最新開發(fā)遇到一個彈框鹊碍，彈框中間有兩個內(nèi)凹的半圓声诸，而且還是透明的，不能遮擋到底層的內(nèi)容俄精。基于這個需求膨蛮，找到了一個比較好的實現(xiàn)方法叠纹。

先上一下demo效果圖：

image.png

實現(xiàn)這個效果主要是用了background-image 結(jié)合徑向漸變radial-gradient。
示例：
background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%);

而對于徑向漸變敞葛，主要是3個參數(shù)控制誉察。
一個是原點和大小。大小類似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() 函數(shù)的知識點

語法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

image.png