Как применить тень на всех четырех сторонах?

Ответ 1

Это из-за смещения x и y. Попробуйте следующее:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (год спустя..): Сделал ответ более кросс-браузером, как указано в комментариях:)

btw: в настоящее время существует много генераторов css3. css3.me, css3maker, css3generator и т.д.

Ответ 2

Смотрите: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

Ответ 3

Это выглядит круто.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

Ответ 4

Просто, как этот код:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

Ответ 5

Самое простое решение и самый простой способ - добавить тень для всех четырех сторон. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

Ответ 6

Я нашел http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ сайт.

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

Ответ 7

Используйте этот код css для всех четырех сторон: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Ответ 8

Я использовал приведенный выше код в двух следующих формах:

      -webkit-box-shadow: 0 0 0 10px #73a9db;
        -moz-box-shadow: 0 0 0 10px #73a9db;
        /*box-shadow: 0px 0px 20px #73a9db;*/
        -o-box-shadow: 0 0 10px rgba(0,0,0,1);
        box-shadow: 0px 1px 7px 0px rgb(115, 169, 219);

и

box-shadow: 0px 1px 7px 0px rgb(115, 169, 219);

в котором последняя строка - это код, который вы упомянули, но проблема все еще сохраняется.: (

Ответ 9

Вы можете разные комбинации по следующей ссылке.
https://www.cssmatic.com/box-shadow

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

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);