用css+html代码实现半圆凹槽+阴影

使用情景：要实现一个卡券类的半圆凹槽，但是需要整体加阴影，因为整体的高度不固定，所以无法让UI直接切整体边缘图，只能自己写，效果如下：

 1.实现思路

左侧两个元素：一个正常底色覆盖，加阴影；另一个放大一点并用filter: blur属性做虚化

右侧两个元素：同理

2.代码如下：

html:

<div class="parent-wrap">  

    <!-- 虚线及凹槽 -->

    <div class="line-circle-wrap">

        <div id='leftCover'></div>

        <hr class="line" />

        <div id='rightCover'></div>

    </div>

</div>

css:

.parent-wrap{

  box-shadow: 2px 4px 6px 0px rgba(34,91,128,0.19);

  // 虚线及凹槽  

  .line-circle-wrap{

    width: 100%;

    height: 24px;

    padding: 0 16px;

    position: relative;

    display: flex;

    align-items: center;

    .line{

      width: 100%;

      border: 0 none;

      border-top : 1.4px dotted rgba(160, 175, 205, 0.6);

    }

    &::before, &::after{

      content: ''

    }

    &::before, &::after, #leftCover, #rightCover {

      position: absolute;

      left: -6px;

      top: 0;

      bottom: 0;

      margin: auto;

      width: 12px;

      height: 12px;

      border-radius: 50%;

      background-color: #F3F5FB;

      z-index: 1;

      box-shadow: inset -6px 2px 6px -4px rgba(34,91,128,0.19);

    }

    &::after, #rightCover{

      left: inherit;

      right: -6px;

      // box-shadow: inset 22px 7px 9px -16px rgba(34,91,128,0.19);

      box-shadow: inset 4px 1px 4px 0px rgba(34,91,128,0.19);

    }

    #leftCover, #rightCover{

      box-shadow: none;

      width: 24px;

      height: 24px;

      filter: blur(5px);

      z-index: 2;

    }

    #leftCover{

      left: -20px;

    }

    #rightCover{

      right: -20px;

      top: -10px;

    }

  }

}