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

本文主要是介绍纯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>

这篇关于纯CSS实现卡片上绘制透明圆孔的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---