javascript - 在图像上带来盒子阴影效果

Question

这是将图像插入动画帧的代码。该代码工作正常，除了一个我找不到解决方案的烦人问题。

我想要图像上的框阴影效果，但出乎意料的是它现在在图像下方。这是中的 box-shadow CSS.box .content

box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);

这是代码：（我在很多方面都尝试过 z-index，但我认为我需要帮助才能正确使用它！）

const content = document.querySelector('.content');
let image = document.createElement('img');
content.appendChild(image);
image.id = 'shot'; 
image.src = 'https://static01.nyt.com/images/2020/01/30/t-magazine/oakImage-1580415371326/oakImage-1580415371326-superJumbo.jpg';
let shot = document.getElementById("shot");
shot.onload = function() {

  imageWidth = this.naturalWidth;
  imageHeight= this.naturalHeight;

  //console.log(imageWidth, imageHeight);

  let viewPortClipWidth = imageWidth * (100 / document.body.clientWidth);
  let viewPortClipHeight = imageHeight * (100 / document.body.clientHeight);

  //console.log(viewPortClipWidth, viewPortClipHeight);

  document.querySelector('.box .content').style.width = `${viewPortClipWidth}vw`;
  document.querySelector('.box .content').style.height = `${viewPortClipHeight}vh`;

}

img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

body {
  height: 100vh;
  margin:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #11151a;
}

.box {  
 border-radius: 0.5vh;
 position: relative;
 overflow: hidden;
}

.box::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
    repeating-linear-gradient(-45deg, white 0  0.48828125vw, #f00c36 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
    width: calc(100% + 1.380859375vw);
    height: calc(100% + 1.380859375vw);
    transform: translate(-1.380859375vw, -1.380859375vw);
    will-change: transform;
    animation: animate 4s linear infinite;
  }

.box .content {
  position: relative;
  max-width: 93vw;
  max-height: 89vh;
  box-shadow: 0 0 0.262vh deeppink, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
  margin:0.3vw;
}

@keyframes animate {
  to {
    transform: translate(0, 0);
    will-change: transform;
  }
}

<div id='box' class="box">
  <div class="content"></div>
</div>

标签： javascripthtmlcss