应用引导程序后，带有透视图的元素上不需要的阴影边框

Question

在对使用透视图的元素应用引导程序后出现问题。我不想阴影元素周围的阴影边框。下图应阐明我的意思。右边的那个使用引导程序，并且显然在阴影元素周围有不需要的可见边框。

以下是相应的html＆css：

HTML

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

CSS

.canvas {
  height: 270px;
  width: 400px;
  border-radius: 50%;
  perspective: 1200px;
}

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

JSFiddle进行复制：

没有Boostrap： https://jsfiddle.net/kh84nep2/1/

引导程序： https://jsfiddle.net/kh84nep2/3/

---

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

Answer 1

影子是引导程序中已经存在的类名称：

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

将您的班级重命名为其他名称。希望有一些信号表明这是你自己的课。

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

还有您的CSS：

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