Box-Shadow для Mozilla не работает

У меня есть этот код CSS, но теневая вещь не работает в Mozilla Firefox:

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    box-shadow: 1px 1px 1px grey;
    -moz-filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}

Это выглядит очень красиво в Chrome, все элементы в теле имеют какую-то тень, и я хочу добиться этого и в Mozilla. Как мне это сделать? Почему "моз" не работает?

Благодарю вас!


css mozilla shadow box-shadow
person K. Sm.    schedule 29.02.2016    source источник
comment
all elements in body have a shadow и все же вы используете это только на body   -  person Roko C. Buljan    schedule 01.03.2016
comment
Извините, что? Да, я использую это только на body, и это работает для всех элементов (в Chrome).   -  person K. Sm.    schedule 01.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вы не должны использовать -moz-filter для box-shadow. Поддержка box-shadow поддерживается почти полностью. Все современные браузеры хороши для работы. Просто box-shadow нормально. Хотя я не уверен, насколько хорошо он поведет себя на элементе body.

Наверное поэтому не работает. Всегда сначала включайте префикс CSS. Без префикса в последнюю очередь. Порядок важен в CSS.

person Tom Kentell    schedule 29.02.2016

arrow_upward
0
arrow_downward

box-shadow и drop-shadow не одно и то же. box-shadow это... box-shadow. И drop-shadow является одним из значений свойства filter. Как видно из Могу ли я использовать, filter полностью поддерживается Firefox и не требует префикса для использования. Это.

Поэтому вам просто нужно изменить префикс и удалить box-shadow, так как это другое, не относящееся к делу свойство:

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}
person xpy    schedule 01.03.2016