Нанесите тени только на две стороны <div>.Возможно с css3 градиентами и обрамлением изображения?

Question

Я пытаюсь создать эффект, который показывает, что div как бы исчезает на фоне контента.Идея в том, что есть простая граница: 1px # 000 solid;вверху и внизу div, затем большая вставная тень слева и справа, чтобы создать видимость того, что div продолжается за страницей, как будто на заднем плане есть щель, через которую div может проходить.

Box-shaodw в настоящее время работает только со всех сторон одновременно.Поэтому мне нужен способ получить большую тень слева и справа, но все же иметь возможность доступа к содержимому под тенью.Это слава теней CSS, вы можете.Изображение просто не будет работать, потому что тогда вы не сможете щелкнуть по нему.

Кто-то в этом посте предложил использовать border-image и поместить в него градиент css3.Это вредит моему мозгу, я начинаю очень смущаться, когда пытаюсь поместить градиент css3 в границу с одной стороны от деления.

Может кто-нибудь помочь?

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

http://designsweeter.com/

Answer 1

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

Answer 2

Здесь я попытался стилизовать окружающие элементы , чтобы отбросить тень на содержимое. Это не красиво и сложно масштабировать, но я думаю, что это похоже на то, что вы описываете.

Он использует w погружений по бокам, чтобы добавить боковые тени, и дополнительный div внизу, чтобы покрыть нижнюю тень div.

Answer 3

Взгляните на решение, предлагаемое здесь . Они имитируют градиент с несколькими цветами границ, вы можете использовать rgba () для имитации прозрачности.

Вы не сможете иметь чистую кросс-браузерную реализацию, поскольку Firefox 5 все еще нуждается в фактическом url () параметре для атрибута изображения границы .

Ваш лучший способ - использовать CSS-маски (только Webkit)