在图像上带来框阴影效果

Question

这是将图像插入动画帧的代码。 除了一个我找不到解决方案的烦人问题外，该代码运行良好。

我想在图片上框阴影效果，但意想不到的是，现在的图像下。 这是.box .content的 box-shadow CSS

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>