Box-shadow无法正确渲染，导致某些区域没有被阴影覆盖

Question

由于某些原因，box-shadow无法正确渲染。我尚未弄清楚是什么原因导致box-shadow渲染不正确。 “ 渲染不正确”的意思是：

如您所见，box-shadow的区域有些透明。要查看发生该问题的时间的完整演示，请访问here。如果不允许代码链接，您可以单击下面的代码段尝试运行演示。我还消除了box-shadow的模糊和散布半径，以清楚地显示问题（在完整版中运行）。

const container = document.querySelector('.container')
const card = document.querySelector('.card')
const output = document.querySelector('.output')
let x = document.querySelector('.x-axis')
let y = document.querySelector('.y-axis')

container.addEventListener('mousemove', (e) => {
  let xOffset = e.offsetX
  let yOffset = e.offsetY
  let cardHeight = card.clientHeight
  let cardWidth = card.clientWidth
  let heightCenter = Math.round(cardHeight / 2)
  let widthCenter = Math.round(cardWidth / 2)
  let rotateBaseValue = 20
  let rotateXValue = (yOffset - heightCenter) / heightCenter * rotateBaseValue
  let rotateYValue = (widthCenter - xOffset) / widthCenter * rotateBaseValue

  card.style.transform = `scale(1.1) rotateX(${rotateXValue}deg) rotateY(${rotateYValue}deg)`
})  

container.addEventListener('mouseout', (e) => {
  card.style.transform = ''
})

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100vw;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  margin: auto;
  perspective: 1000px;
}

.card {
  height: 25vw;
  width: 15vw;
  border-radius: 10px;
  overflow: hidden;
  transition: all .25s linear;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container:hover .card {
  box-shadow: 10px 30px black;
}

<div class="container">
  <div class="card">
    <img src="https://66.media.tumblr.com/baf4a8fec55a6cb6fd7b18a7855998e4/tumblr_ply7xcI7pl1sjt61g_540.png" alt="Moonlight Cookie's Alluring Crescent Moon Costume">
  </div>
</div>

我的问题是：

• 使用box-shadow时导致透明区域出现的原因是什么？
• 如何解决上述问题（即如何使透明区域消失）？

Answer 1

该图像中有透明边框。

因此，我为您提供两种解决方案。首先是您必须裁剪图像，如RamRaider所示。

或第二种方法（不裁剪图像）是使用过滤器属性替换箱形阴影，如下所示：

.container:hover  {
  .card {        
    filter: drop-shadow(10px 30px 44px black);
  }
}

请记住，您不能将散布值与drop-shadow（）函数一起使用，因此可能必须降低模糊度。