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

Posted 2023-03-06

【中文标题】Box-Shadow 适用于 Chrome，但不适用于 Firefox 或 IE

【英文标题】：Box-Shadow works on Chrome but not on Firefox or IE

【发布时间】：2016-09-25 10:39:19

【问题描述】：

@-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 中替换 text-shadow，则 text-shadow 有效。救命！！

【问题讨论】：

使用 -webkit- 作为前缀意味着“此规则仅适用于 webkit 渲染引擎”尝试删除它：而不是 -webkit-box-shadow 使用 box-shadow 等等。

【参考方案1】：

首先，您的班级.deallinkactive 指向错误的关键帧，它显示neon2，将其更改为neon。然后从所有-webkit-box-shadow 中删除-webkit-。最后，@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 生成盒子阴影

【参考方案2】：

firefox 必须使用 moz

-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