Html 如何使用CSS制作3D框架

我想为图像创建一个边框，并使其看起来像具有此纹理的3D帧：

应该是这样的:

我试着做到这一点：

<style>
.woocommerce-product-gallery__image {
position:relative;
margin: 50px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
}
.woocommerce-product-gallery__image:before{
position: absolute;
Content:'';
Left:-50px;
top:-50px;
bottom:-50px;
right:-50px;
Background:linear-gradient(1deg, #666, #ccc);
Background: url('https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_(8).jpg');
Z-index:-10;
Box-shadow:-5px 0 5px -2px #000
}
.woocommerce-product-gallery__image:after{
position: absolute;
Left:-20px;
Top:-20px;
Bottom:-20px;
Right:-20px;
Background: url('https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_(8).jpg');
Content:'';

Z-index:-1
}
</style>

.woocommerce-product-gallery\uuuu图片{
位置：相对位置；
利润率：50像素；
背景：-莫兹线性梯度（顶部，rgba（255255,0.7）0%，rgba（255255,0.2）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、色挡（0%，rgba（255255,0.7））、色挡（100%，rgba（255255,0.2））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（255255,0.7）0%，rgba（255255,0.2）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（255255,0.7）0%，rgba（255255,0.2）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（255255,0.7）0%，rgba（255255,0.2）100%）；/*IE10+*/
背景：线性梯度（顶部，rgba（255255,0.7）0%，rgba（255255,0.2）100%）；/*W3C*/
}
.woocommerce-product-gallery__图片：之前{
位置：绝对位置；
内容：''；
左：-50px；
顶部：-50px；
底部：-50px；
右：-50px；
背景：线性梯度（1deg，#666，#ccc）；
背景：url（'https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_（8） .jpg'）；
Z指数：-10；
盒影：-5px 0 5px-2px#000
}
.woocommerce-product-gallery__图片：之后{
位置：绝对位置；
左：-20px；
顶部：-20px；
底部：-20px；
右：-20px；
背景：url（'https://aduvan.ru/wp-content/uploads/photo-gallery/wood-texturs/wood-texture_（8） .jpg'）；
内容：''；
Z指数：-1
}

但看起来是这样的：

检查此演示：

既然您已经在使用一个图像，为什么不创建一个如下所示的图像（看起来像框架边框）并使用这个css呢-

#preview {
    width:200px;
    height:300px;
    background:red;
    border: 25px solid transparent;
    border-image-slice: 27 27 27 27;
    border-image-width: 25px 25px 25px 25px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("imageUrl");
}

---

聪明的举动！我有幸更新了图案的方向，这真是聪明的举动！