Question

@-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和手机，但不适用于IE和Firefox。我试过-webkit-box-shadow，box-shadow，moz-box-shadow以及我在互联网上发现的所有东西。如果我在box-shadow中替换text-shadow，则text-shadow会起作用。帮助！

Answer 1

首先，您的班级.deallinkactive指向错误的关键帧，它显示neon2，将其更改为neon。然后从所有-webkit-中删除-webkit-box-shadow。最后，Firefox bug 830056中的内联或范围样式表不支持@keyframes。

但你有另一个选择：

@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

生成框阴影

Answer 2

你必须使用moz for firefox

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

-moz-box-shadow：10px 10px 5px 0px rgba（0,0,0,0.75）; box-shadow：10px 10px 5px 0px rgba（0,0,0,0.75）;

在css3中尝试框阴影生成器 http://www.cssmatic.com/box-shadow

Box-Shadow适用于Chrome，但不适用于Firefox或IE

2 个答案: