移除Vuetify对话框内div的透明边框阴影（保留对话框阴影）

问题场景：在Vuetify的v-dialog组件内添加了一个通过透明边框实现的三角形div，想要移除该div透明边框区域带出的阴影，但保留v-dialog本身的投影。直接给div设置box-shadow: none;无效，因为阴影来自父容器v-dialog的box-shadow，会覆盖到子元素的透明区域。

问题代码回顾 #

三角形样式：

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid white;
}

v-dialog组件结构：

<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);
}

解决方案 #

核心思路是让阴影只作用在v-card上，而非整个v-dialog容器，这样三角形div不在v-card范围内，就不会被阴影覆盖。

方法1：调整阴影作用对象

1. 移除v-dialog的box-shadow，将阴影样式转移到v-card上
2. 微调三角形的margin确保和卡片对齐

修改后的样式：

/* 移除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: none;
}

/* 给v-card添加阴影 */
.v-card {
    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);
}

/* 调整三角形的margin，消除缝隙并对齐 */
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid white;
  margin-bottom: -1px;
  margin-left: 24px;
}

方法2：用v-card伪元素实现三角形

这种方法无需额外div，直接通过伪元素生成三角形，更简洁且不会受阴影影响：

1. 移除原来的.arrow-up div
2. 给v-card添加伪元素样式：

.v-card {
    position: relative;
    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);
}

.v-card::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 24px;
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid white;
    z-index: 1;
}

/* 移除v-dialog的阴影 */
.v-dialog {
    box-shadow: none !important;
    /* 保留其他原有样式 */
}

两种方法都能彻底解决透明边框区域带出阴影的问题，同时保留卡片的投影效果。

内容的提问来源于stack exchange，提问作者ToddT