Есть ли способ совместить изображение рамки и тень блока вставки, которая работает?

Я пытаюсь сделать деревянную рамку с вставкой. Я сделал бордюрное изображение и применил к нему вставку и обычную тень. Обычная тень прекрасно работает как тень. Вложенная тень смещена на много пикселей. Что не так и можно ли это исправить? Я пытаюсь сделать так, чтобы встроенная тень располагалась прямо напротив деревянной рамки, а не в нескольких пикселях от нее, там, где печатается текст.

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


html css box-shadow border-image
person Hideto    schedule 06.08.2015    source источник
comment
Я не уверен, правильно ли я понимаю ожидаемое поведение, но, вероятно, это связано с тем, как работает inset. глядя на developer.mozilla.org/en-US/docs/ Web/CSS/box-shadow ... Вложенные тени рисуются внутри границы (даже прозрачной), над фоном, но под содержимым.   -  person Praveen Puglia    schedule 06.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ваше изображение границы имеет ширину всего 10 пикселей, а не 23. Серый цвет — это дополнительное прозрачное пространство, которое, как ожидается, будет частью изображения.

border-image: url(http://www.cafenocturne.com/images/WoodFrameBrdrImg.png) 10 fill repeat;
person Mark Kahn    schedule 06.08.2015
comment
Я гоб. Вот что я получаю за использование веб-генератора. Я неправильно понял, как это работает, и ввел неправильные значения. Спасибо! - person Hideto; 06.08.2015