前言:
一般在开发项目的时候,我们可能为了卡片个性化,一般是让卡片两侧对称位置形成凹槽,同时达到镂空效果,如下图
于是就打开编辑器写一个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
就是超出隐藏的意思,填上这行代码就是满足需求的