Ответ 1

Вы смещаете тень, поэтому, чтобы она равномерно окружала рамку, не смещайте ее:

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

Ответ 2

Да, не смещайте вертикально или горизонтально и используйте относительно большой радиус размытия: fiddle

Кроме того, вы можете использовать несколько теней теней, если вы разделите их запятой. Это позволит вам точно настроить, где они размываются, и насколько они расширяются. Пример, который я предоставляю, неотличим от большого outline, но его можно настроить гораздо больше: fiddle

Вы пропустили последнее и наиболее релевантное свойство box-shadow, которое spread-distance. Вы можете указать значение того, насколько тень расширяется или сжимается (делает мой второй пример устаревшим): fiddle

Полный список свойств:

box-shadow: [горизонтальное смещение] [вертикальное смещение] [размытие-радиус] [спред-расстояние] [цвет] вставка?

Но еще лучше, прочитайте спецификацию.

Ответ 3

Просто используйте приведенный ниже код. Он будет затенять весь DIV

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

Надеюсь, что это сработает

Ответ 4

Используйте этот код ниже

 border:2px soild #eee;

 margin: 15px 15px;
 -webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;

Объяснение: -

box-shadow требует, чтобы вы установили горизонтальное & смещение по вертикали, затем вы можете по желанию установить размытие и цвет, вы также можете выбрать для вставки тени вместо стандартного. Цвет можно определить как hex или rgba.

box-shadow: вставка/выход h-offset v-offset смещение цвета размытия;

Объяснение значений...

inset/outset - находится ли тень внутри или вне поля. Если он не указан, он будет по умолчанию установлен в исходное положение.

h-offset - горизонтальное смещение тени (обязательное значение)

v-offset - вертикальное смещение тени (обязательное значение)

размытие - как говорится, размытие тени

Распространение - отодвигает тень от коробки одинаково со всех сторон. Положительное значение заставляет тень расширяться, отрицательное заставляет ее сокращаться. Хотя это значение не часто используется, оно полезно с несколькими тенями.

цвет - как говорится, цвет тени

Использованиеbox-shadow: 2px 3px 8px #eee; серая тень с горизонтальной проекцией 2px, вертикальной с 3px и размытостью 8px

Ответ 5

Код CSS будет следующим:

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

Это затеняет весь DIV независимо от его формы!

Ответ 6

.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Используйте это при наведении курсора, чтобы увидеть его реальный эффект, это даст границу & тень, чтобы разделить..