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

ボーダー画像の幅は 23 ピクセルではなく、わずか 10 ピクセルです。灰色は、画像の一部であると予想される追加の透明スペースです。

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