html - 有没有一种方法可以结合有效的边框图像和插图框阴影？

Question

我正在尝试制作一个带内嵌边框的木框。我制作了一个边框图像并对其应用了插图和常规框阴影。常规阴影作为投影效果很好。插入的阴影偏移了许多像素。出了什么问题，可以修复吗？我试图让嵌入的阴影正好靠在木框上，距离木框不远几个像素，进入文本打印的位置。

.box {
  background: gray;
  color: white;
}
.box-shadow2 {
  border-style: solid;
  border-width: 23px;
  -moz-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  -webkit-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  -o-border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 repeat;
  border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 23 fill repeat;
  -webkit-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 3px 3px 5px 0px rgba(0, 0, 0, 0.75), 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
}

<div class="box box-shadow2">Text</div>

Answer 1

您的边框图像只有 10 像素宽，而不是 23 像素。灰色是它希望成为图像一部分的额外透明空间。

border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;