CSS Смешать все края <div>

Question

CSS Смешать все края <div>

0

Могу ли я смешивать div так, как я этого хочу? Я понимаю, что могу использовать

body {
    box-shadow: 10px 10px 10px 10px white;
}

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

Помогите, друзья!

Zaft787 07 май 2014, в 21:33

Источник

Теги:

html

css

css3

blur

blending

2 ответа

Ещё вопросы

arocketman · Answer 1 · 2014-05-07T17-25-00.000Z

Просто прочитайте, что вы применяете "10px 10px 10px 10px" к..

http://css-tricks.com/snippets/css/css-box-shadow/

Вы даете 10px и 10px для HORIZONTAL и VERTICAL offset, поэтому вы получаете 3D-эффект.

Просто удалите их:

box-shadow: 0 0 10px 10px white;

http://jsfiddle.net/wAcC6/

ех.

Juan Mendes · Answer 2 · 2014-05-07T17-22-00.000Z

См. Http://css3gen.com/box-shadow/ и http://css-tricks.com/snippets/css/css-box-shadow/. Вы удаляете вертикальные и горизонтальные смещения

http://jsfiddle.net/d552b/

-webkit-box-shadow: 0 0 20px 0 rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0 0 20px 0 rgba(50, 50, 50, 0.75);
box-shadow:         0 0 20px 0 rgba(50, 50, 50, 0.75);

Объяснение компонентов box-shadow

Горизонтальное смещение тени, положительное означает, что тень будет справа от поля, отрицательное смещение поместит тень слева от поля.
Вертикальное смещение тени, отрицательное означает, что тень коробки будет выше поля, положительная - тень будет ниже поля.
Радиус размытия (по желанию), если установлено значение 0, тень будет острой, чем выше число, тем более размытым будет.
Радиус распространения (необязательно), положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. Значение по умолчанию равно 0 (тень такого же размера, как размытие).
цвет