CSS - расширенный фон предметов

Question

Я хочу создать элемент (ссылку), который будет иметь внутренние тени с обеих сторон (слева и справа), а остальная часть элемента будет прозрачной.

Это должно выглядеть примерно так:

Дело в том, что я не знаю, насколько широкой будет моя ссылка, поэтому мне нужно что-то вроде:

background: url(left-shadow) left center;
background: url(right-shadow) right center;

Но для одного элемента.Есть идеи, как этого добиться?

Вы, ребята, абсолютно правы в отношении нескольких фонов, но они не поддерживаются даже в IE8:

http://www.quirksmode.org/css/multiple_backgrounds.html

Так что, может быть, что-тоеще?Я забыл упомянуть, что я хочу, чтобы мое решение работало, по крайней мере, в IE8 (и было бы прекрасно, если бы оно работало и в IE7).

Answer 1

Хм, это действительно интересно!Я бы посоветовал вам добавить три фона.

background:url(bottom-shadow) left bottom, url(left-shadow) left center, url(right-shadow) right center;

Нижняя тень также должна включать серо-белый градиент.Обратите внимание на запятые между каждым фоном.

Answer 2

Вы захотите использовать css «Раздвижные двери», он добавляет немного накладных расходов на разметку, но будет хорошо работать для этого сценария, пока CSS3-фоновые функции не станут более широко поддерживаемыми.

Вы можете прочитать об этом здесь: Список, кроме техники "Раздвижные двери"

Answer 3

CSS3 поддерживает несколько фонов со следующим синтаксисом:

background: url(left-shadow) left center,
            url(right-shadow) right center,
            url(bottom-shadow) center bottom;

Answer 4

CSS Внутренняя тень с примером

.innerShadow_css
{
   -moz-box-shadow:inset 0 0 11px #000000;
   -webkit-box-shadow:inset 0 0 11px #000000;
   box-shadow:inset 0 0 11px #000000;
}

http://discoverweb.info/css-inner-shadow.html