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

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

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

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

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

2 ответа

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

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

Вы даете 10px и 10px горизонтальному и вертикальному смещению, поэтому вы получаете эффект 3d.

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

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

http://jsfiddle.net/wAcC6/

ех.

Смотрите 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

  1. Горизонтальное смещение тени, положительное означает, что тень будет справа от поля, отрицательное смещение поместит тень слева от поля.

  2. Смещение тени по вертикали, отрицательное значение означает, что тень от рамки будет выше рамки, положительное значение означает, что тень будет находиться ниже рамки.

  3. Радиус размытия (необязательно), если задано значение 0, тень будет четкой, чем выше число, тем более размытым он будет.

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

  5. цвет

Другие вопросы по тегам