Добавьте тень блока CSS вокруг всего DIV

Question

Возможно ли, чтобы тень окружала весь DIV?

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

Я знаю, что порядок атрибутов таков:

• Горизонтальное смещение
• Вертикальноесмещение
• Радиус размытия
• Цвет

Но мне интересно, можно ли заставить тень вращаться вокруг нее, вместо того, чтобы показываться только на одном краю или стороне?

Answer 1

Просто обнулить смещения?

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

Answer 2

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

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

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

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

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

Но, что еще лучше, прочтите spec .

Answer 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);

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

Answer 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 - находится ли тень внутри или снаружи коробки. Если не указано иное, по умолчанию используется значение outset.

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

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

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

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

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

Использование

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

Answer 5

Код CSS будет:

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

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

Answer 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);
}

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