有没有办法将边框图像和插入框阴影结合起来？答案

【问题标题】：Is there a way to combine border-image and inset box-shadow that works?有没有办法将边框图像和插入框阴影结合起来？
【发布时间】：2015-08-06 14:41:48
【问题描述】：

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

.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);
}

&lt;div class="box box-shadow2"&gt;Text&lt;/div&gt;

【问题讨论】：

我不确定我是否准确理解了预期的行为，但这可能是因为inset 的工作原理。看着developer.mozilla.org/en-US/docs/Web/CSS/box-shadow ... 在边框内（甚至是透明的）内绘制嵌入阴影，在背景上方，但在内容下方。

标签： html css box-shadow border-image

【解决方案1】：

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

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

【讨论】：

我是个傻瓜。这就是我使用网络生成器所得到的。我误解了它的工作原理并输入了错误的值。谢谢！