Создание <div>с тенью только на левой и правой сторонах - PullRequest
18 голосов
/ 03 апреля 2011

Моя цель - добавить тень слева и справа от #container div шириной 960 пикселей.

Сам #container содержит заголовок, навигационное меню, главноесодержание, боковая панель и нога.Но сам заголовок выступает из #container с настраиваемой шириной из-за графики.

Как таковой, он не добавляет тень справа и слева.Только навигационное меню вниз нуждается в удалении.Это связано с тем, что заголовок настроен на произвольную ширину и выступает за пределы #container.Тень слева и справа от того, что уже выступает, разрушит эстетику.

Для лучшей визуализации мой сайт выглядит как http://www.doubleyourdating.com/,, но элемент заголовка выступает с обеих сторон.

Я пытался добавить тень слева и справа от #container из меню навигации вниз с помощью следующих решений:

  1. I Photoshopped изображение высотой 1px, шириной 1010px, которое содержит 25-пиксельное «затухание» на противоположных концах.Я назвал это CSS #container div background-image, но, вероятно, из-за того, что сам #container установлен на ширину 960 пикселей, фон шириной 1010 пикселей не может отображаться.Обратите внимание, что изменение ширины в 960 пикселей создаст каскад смерти в этом простом макете из двух столбцов.

  2. Я пытался создать CSS для создания временного блока теней вокруг "div" контейнера, но это не так.не работает, потому что мой заголовок имеет настраиваемую ширину, которая выходит за пределы контейнера.

Как мне сделать эту работу?

Ответы [ 2 ]

41 голосов
/ 03 апреля 2011

Вы можете попробовать что-то вроде этого:

box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;

Конечно, возиться со значениями , пока не подойдет вам.

0 голосов
/ 28 июня 2013

Одна строка кода:

box-shadow: 4px 0 2px #222,  -4px 0 2px #222; 

Просто вставьте соответствующий элемент стиля CSS Готово! * * 1004

...