CSS:从具有阴影的Vuetify对话框内的div中删除阴影

lrpiutwd  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(129)

我有一个对话框,在一个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);
}
icomxhvb

icomxhvb1#

要实现这一点,您需要从对话框中删除框阴影,并将其添加到卡中。要看到卡上的框阴影,您需要删除对话框上的溢出规则。
你可能会想调整盒阴影适合什么。

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

相关问题