Вставка Box Shadow не работает

Question

Итак, я использовал вставку из теневого бокса, чтобы сделать внутреннее свечение, делающее края размытыми и затененными, как при взгляде на края. Я пытаюсь использовать его только для верха и низа, а не для левой / правой сторон. Но это не работает. Я использую его на overflow: auto <div>, чтобы он мог прокручиваться и иметь хороший эффект.

Вот мой css:

#content {
    font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif; 
    line-height:1.2em;
    height: 400px;
    width: 500px;
    overflow: auto;
    float: right;
    padding: 0 10px;

    -moz-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    -webkit-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}

Answer 1

У вас есть черная тень на черном фоне, поэтому, естественно, вы ничего не увидите.Отключив черный фон, мы отлично видим тени ...

http://jsfiddle.net/sparky672/p3Mgn/1/show

Так что вам просто нужно выбрать разные цвета теней.Здесь ваши тени изменились на белый #fff ...

Демо в полном размере

http://jsfiddle.net/sparky672/p3Mgn/3/

-moz-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;

РЕДАКТИРОВАТЬ в ответ на комментарии ОП:

Браузеру предоставляется только два цвета для использования для рендеринга тени.

1) Цвет фонового изображения (или только цвет фона в этомcase)

2) Цвет тени

Где бы они ни были одинаковыми, тень будет невидимой.

Чтобы получить размытый эффект с использованием черного фона, возможно,попробуйте #444 для тени ... это выглядит довольно хорошо, я думаю ...

http://jsfiddle.net/sparky672/p3Mgn/5/show/

Answer 2

Вы хотите, чтобы тень над содержимым размывала верх и низ? Если да, то проблема заключается в том, что ваша тень отображается ниже содержимого. Вы можете сделать это выше, если вы установите "position: относительный; z-index: -1;" в блок контента, но тогда вы не сможете щелкнуть или прокрутить его.

Более простой способ добиться этого эффекта - использовать: до и после псевдоклассов и css-градиентов.

Пример здесь: http://jsfiddle.net/V96wx/2/

В моем примере выше вам понадобятся 2 контейнера - один для переполнения и один для затухания (чтобы сделать его более пуленепробиваемым). Но теоретически вы можете сделать это только с 1 контейнером, я напишу, как ...

Прежде всего - как работают :before и :after. Самый простой способ думать о них - это добавить еще 2 элемента в родительский контейнер до и после реального содержимого. Например: .about:before будет добавлено в контейнер .about, но до фактического содержимого.

:before и :after имеют одно обязательное свойство, если вы его не добавили, элемент не будет создан. conent может иметь одно из следующих значений: htmldog.com/reference/cssproperties/content. В моем примере это было оставлено пустым. После того, как элемент вставлен, вы можете оформить его по своему усмотрению, используя те же правила, что и любой другой элемент.

Чтобы сделать затухание в моих примерах, я использовал градиент с прозрачностью. Вы можете прочитать о градиентах здесь davidwalsh.name / css-градиенты . Прозрачность выполняется с помощью цветов в rgba (4-я цифра - уровень прозрачности).

Причина, по которой я использовал 2 контейнера в моем примере, заключается в том, что сложнее точно расположить элементы :before и :after над основным контейнером без него - если вы попытаетесь использовать для них действительные координаты, они будут расположены правильно, но будет прокручивать содержимое, и если вы не используете position: относительный к базовому контейнеру, вам нужно будет знать координаты этого контейнера, чтобы выполнить позиционирование. Это не проблема, если высота контейнера фиксирована, но может быть сложно, если это не так.

Кстати: теоретически есть еще более простой способ сделать затухание - с помощью масок css с градиентами ( webkit.org / blog / 181 / css-masks ), но сейчас он работает только в Safari и Chrome.