h5项目中，商品卡片的镂空打口是如何实现的

前言：
一般在开发项目的时候，我们可能为了卡片个性化，一般是让卡片两侧对称位置形成凹槽，同时达到镂空效果，如下图

于是就打开编辑器写一个demo

<template>
  <div class='content'>
   
    <div class="card">
      <div class="middle"></div>
    </div>
  </div>
</template>

<script setup>

</script>
<style lang='scss' scoped>
.content {
  height: 500px;
  width: 500px;

  .card {
    // background-color: #666;
    width: 300px;
    height: 200px;
    margin: auto;
  }

  .middle {
    height: 50px;
    position: relative;
    overflow: hidden; //这行代码意义是，隐藏为元素的超出middle盒子的部分边框
  }

  .middle::before,
  .middle::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 136px solid #333; //关键所在，让盒子边框和另一个盒子边框重叠，填充middle的宽
    
  }

  .middle::before {
    left: -150px;
  }

  .middle::after {
    right: -150px;
  }
}

</style>

效果如下：

其中有一行比较细节的代码，就是在middle中的overflow:hidden;如果不写这行代码，效果如下

哈哈哈，看上去有点搞笑，这个overflow;hidden就是超出隐藏的意思，填上这行代码就是满足需求的