我有一个对话框,在 div 上使用 CSS 添加了一个三角形。但 CSS 的技巧是边框的一部分是透明的。我试图克服的问题是从透明边框中删除阴影,而不从对话框本身删除阴影。
将其添加到 div 不起作用:
box-shadow: none;
这是我要删除的内容的图片:
创建这个三角形的 div 上的类是这样的:
.arrow-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid white;
}
然后有阴影的对话框是这样的:
<v-dialog
v-model="dialog"
max-width="350px"
persistent
hide-overlay
>
<div class="arrow-up mb-n1 ml-1"></div>
<v-card>
<v-container>
<v-card-text>
<v-row>
<v-col
cols="12"
align="start"
>
<p class="text-subtitle-1">
Always best to start at the beginning, let's pull your products first.</p>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="mt-n8">
<v-btn
color="#68007d"
text
@click="closeEverything"
>
CLOSE
</v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-dialog>
v-dialog本身就有这个类创建阴影
.v-dialog {
border-radius: 4px;
margin: 24px;
overflow-y: auto;
pointer-events: auto;
transition: .3s cubic-bezier(.25,.8,.25,1);
width: 100%;
z-index: inherit;
outline: none;
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
} Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
要实现此目的,您需要从对话框中删除框阴影并将其添加到卡片中。要看到卡上的框阴影,您需要删除对话框上的溢出规则。
您可能想要将盒子阴影调整到适合的程度。
CSS:
.v-dialog { box-shadow: none; overflow: visible; } .arrow-up { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid white; position: relative; z-index: 1; } .v-sheet.v-card:not(.v-sheet--outlined) { box-shadow: 0px -16px 50px -1px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); }示例: Codepen