Как использовать три фоновых изображения в одном div для эмуляции тени

Question

Я создаю аккордеонное меню, высота которого изменяется при открытии / закрытии элементов меню, и мне нужна тень на боковой стороне меню.

У меня есть три изображения, которые можно использовать в качестве фоновых изображений для эмуляции тениэффект (по одному для верха и низа, а другой для середины, который будет повторяться в измерении y).В настоящее время я установил фоновое изображение для верхнего левого и нижнего левого уголков, но не могу понять, как заставить среднюю тень повторяться, чтобы заполнить пробел.

Есть предложения?

background: url('/devassets/content_shadow_top.png') left top no-repeat,  url('/devassets/content_shadow_bottom.png') left bottom no-repeat;

Answer 1

CSS Shadows

    /*  Box Shadow, To Do: IE hack using filters */
    -moz-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    -webkit-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    box-shadow: 2px 0 3px #000, -2px 0 3px #000;

Нет причин использовать изображения, если ваша тень не очень сложная.

Больше информации на css-tricks .

Answer 2

Вы можете сделать это с помощью дополнительной разметки.Создайте новый элемент, содержащий каждое из изображений, и расположите их по мере необходимости для достижения эффекта.