Box-Shadow работает на Chrome, но не на Firefox или IE

@-webkit-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@-moz-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@-o-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 


.deallinkactive { 
display: inline; 
float: right; 
width: 508px; 
padding: 5px; 
font-size: 14px; 
margin: 10px 10px 8px 8px; 
border: 1.5px solid rgba(173, 38, 38, 0.541176); 
-webkit-border-radius: 3px; 
border-radius: 3px; 
color: rgba(0, 0, 0, 1); 
background: #ecf0f1; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
-webkit-animation: neon2 .2s ease-in-out infinite alternate; 
-moz-animation: neon2 .2s ease-in-out infinite alternate; 
animation: neon2 .2s ease-in-out infinite alternate; 
    }

Теневая анимация Box отлично работает на Chrome и Mobiles, но не на IE и Firefox. Я попробовал -webkit-box-shadow, box-shadow, moz-box-shadow и все, что я нашел в Интернете. Если я заменю теневую тень в тени тега, теневая тень будет работать. Помогите!!Box-Shadow работает на Chrome, но не на Firefox или IE

источник

2016-05-27 Pradeepan M

использование -webkit- в качестве префикса означает «это правило только для WebKit разрывая двигатель», попробуйте удалить его: вместо -webkit-коробчатой тень использование бокса-тень и так далее. –

Прежде всего, ваш класс .deallinkactive указывает на неправильный ключевой кадр, он говорит neon2, измените это на neon. затем удалите -webkit- со всего -webkit-box-shadow. Наконец, @keyframes не поддерживается в встроенной или расширенной таблице стилей в Firefox bug 830056.

Но у вас есть альтернативный:

@keyframes neon { 
    0% { 
     -webkit-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
     -moz-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
     box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
    } 
    100% { 
     -webkit-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
     -moz-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
     box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
    } 
} 

.deallinkactive { 
    display: block; 
    float: right; 
    width: 508px; 
    padding: 5px; 
    font-size: 14px; 
    margin: 10px 10px 8px 8px; 
    border: 1.5px solid rgba(173, 38, 38, 0.541176); 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    color: rgba(0, 0, 0, 1); 
    background: #ecf0f1; 
    transition: all 0.5s ease; 
    animation: neon .2s ease-in-out infinite alternate; 
}

Fiddle example

Он работает на современных браузеров (Chrome, Firefox, Safari, IE10 +). Надеюсь, поможет.

Подсказка: попробуйте генерируя бокс-тень с помощью cssmatic.com/box-shadow

источник

2016-05-27 08:39:30 CodeMonk

Это сработало отлично. Благодарю. –

Вы должны использовать Моса для светлячок

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

-moz-бокс-тень: 10px 10px 5px 0px RGBA (0,0,0, 0,75); box-shadow: 10px 10px 5px 0px rgba (0,0,0,0,75);

Try коробки тень генератор CSS3 http://www.cssmatic.com/box-shadow

источник

2016-05-27 08:42:12

Я попробовал, но это не сработает. –

Box-Shadow работает на Chrome, но не на Firefox или IE

ответ

Смежные вопросы