Html 如何创建周围有边框的三维图像？

从一个图像，我必须显示它作为一幅画，并把它的框架（所有这一切与三维透视）。 这是图像的外观，就像一幅画：

这是框架的外观：

这是我的代码，到目前为止，只有一部分看起来像图片

.sh{
--瓦洛沙多：-20px 30px 10px rgba（0,0,0,0.3）；
过滤器：投影（var（--valorshadow））；
}
.盒子{
--x:10px；
--y:30px；
剪辑路径：多边形（0计算（var（--x）+var（--y）），var（--y）var（--y），计算（100%var（--y））var（--y），计算（100%var（--y））计算（100%var（--y）），var（--y）计算（100%var（--y）），0计算（100%var（--x）-var（--y））；
利润率：30像素；
变换原点：左；
变换：透视（1000px）旋转（35度）；
轮廓：var（--y）实心rgba（0,0,0,0.4）；
轮廓偏移量：计算（-1*var（-y））；
}

---

在这种情况下，您只需调整

剪辑路径即可保持轮廓可见。使用的第一个片段中的一个


.box{
--x:10px；
--y:30px；
剪辑路径：多边形（0 var（--x），var（--y）0，
100% 0, 100% 100%,
var（--y）100%，0计算（100%-var（--x））；
利润率：30像素；
变换原点：左；
变换：透视（1000px）旋转（35度）；
轮廓：var（--y）实心rgba（0,0,0,1）；
轮廓偏移量：计算（-1*var（-y））；
}
@Temaniaf如果我们是两个人，这是学校的团队合作，是数据库评估，但我们对html和css知之甚少，因此我们在做项目的视觉部分时遇到了困难。我们必须像一个小的艺术商店一样，当另一个做这个项目的女孩告诉我你回答了这个问题时，我也想上传这个问题，看看是否有运气。希望如此。感谢您回答前面的问题。：）这就是你想要的吗？@Temaniaff如果是的，就这样，非常感谢。真的非常感谢。在我的答案中添加了另一个更好的渲染方法