我有一个对话框,在 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); }
要实现此目的,您需要从对话框中删除框阴影并将其添加到卡片中。要看到卡上的框阴影,您需要删除对话框上的溢出规则。
您可能想要将盒子阴影调整到适合的程度。
CSS:
示例: Codepen