纯CSS实现卡片上绘制透明圆孔

<template>
    <div class="dot-card-wrapper">
        <div class="top-wrapper">
            <slot name="top"></slot>
        </div>
        <!-->核心是下面这部分</-->
        <div class="dot-row">
            <div class="left-block"></div>
            <div class="color-block"></div>
            <div class="right-block"></div>
        </div>
        <div class="bottom-wrapper">
            <slot name="bottom"></slot>
        </div>
    </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scope>
.dot-card-wrapper {
    box-shadow: -4px 0px 4px 4px rgba(93, 109, 137, 0.15);
    position: relative;

    .top-wrapper,
    .bottom-wrapper {
        background: #ffffff;
    }

    .dot-row {
  
        $dotSize: 10px;
        display: flex;
        align-items: stretch;

        .color-block {
            background-color: #fff;
            flex: 1;
            height: $dotSize * 2;
        }

        .left-block {
            flex-basis: $dotSize + 10px;
            background-image: radial-gradient(circle at 0px, transparent $dotSize, rgb(255, 255, 255) 11px);

        }

        .right-block {
            flex-basis: $dotSize + 10px;
            background-image: radial-gradient(circle at 100%, transparent $dotSize, rgb(255, 255, 255) 11px);
        }
    }
}
</style>