0

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

.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>

4

1 回答 1

0

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

border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
于 2015-08-06T06:41:48.900 回答