Javascript 应用引导后，透视元素上不需要的阴影边框

在将引导应用于使用透视图的元素后，我遇到了一个问题。我不希望阴影元素周围有阴影边框。下面的图片应该澄清我的意思。右边的一个使用引导，并且在shadow元素周围明显有一个不需要的可见边框

以下是相应的html和css：

HTML

<div class="canvas">
 <span class="shadow"></span>
</div>

JSFiddle复制：

没有胸环：

引导：

---

---

为什么会这样？如何在不删除引导的情况下删除边框

Shadow是引导中已经存在的类名：

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

将您的类重命名为其他类。希望这是你自己的班级

<div class="canvas">
 <span class="canvas-shadow"></span>
</div>

---

引导使用

shadow

类添加阴影。。因此，请使用另一个名称，重命名itthanks:D@TemaniAfif

<div class="canvas">
 <span class="canvas-shadow"></span>
</div>

.canvas-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 50%);
  transform: rotateX(90deg) translateZ(-100px);
  z-index: -1;
}