应用 bootstrap 后具有透视的元素上不需要的阴影边框
Unwanted shadow border on element with perspective after applying bootstrap
将 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 的情况下删除边框?
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 应用于使用透视的元素后出现问题。我不想要阴影元素周围的阴影边框。下面的图片应该能说明我的意思。右边的那个使用 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 的情况下删除边框?
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;
}