应用 bootstrap 后具有透视的元素上不需要的阴影边框

Question

将 bootstrap 应用于使用透视的元素后出现问题。我不想要阴影元素周围的阴影边框。下面的图片应该能说明我的意思。右边的那个使用 bootstrap 并且在阴影元素周围显然有一个不需要的可见边框。

这里对应的是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：

无助推器： https://jsfiddle.net/kh84nep2/1/

Bootstrap: https://jsfiddle.net/kh84nep2/3/

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

Answer 1

Shadow 是 class 名称，已存在于 bootstrap:

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

将您的 class 重命名为其他名称。希望有些东西表明它是你自己的 class.

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

应用 bootstrap 后具有透视的元素上不需要的阴影边框

Unwanted shadow border on element with perspective after applying bootstrap

javascript

html

css

twitter-bootstrap

perspective