我正在尝试制作一个带内嵌边框的木框。我制作了一个边框图像并对其应用了插图和常规框阴影。常规阴影作为投影效果很好。插入的阴影偏移了许多像素。出了什么问题,可以修复吗?我试图让嵌入的阴影正好靠在木框上,距离木框不远几个像素,进入文本打印的位置。
.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>
最佳答案
您的边框图像只有 10 像素宽,而不是 23 像素。灰色是它希望成为图像一部分的额外透明空间。
border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
关于html - 有没有一种方法可以结合有效的边框图像和插图框阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31848306/