Html CSS阴影在IE/Edge中工作，而不是在Chrome或Firefox中

该列表中的数字在Chrome或Firefox中没有阴影（它们只是白色）。在IE/Edge中，它们有一个阴影。我正试图让阴影显示在Firefox和Chrome中

我尝试将rgba（0,0,0,1）添加到每个文本阴影行的末尾，而不是#000，但没有成功（如下所示）：

不起作用

text-shadow:
   3px 3px 0 rgba(0,0,0,1),
 -1px -1px 0 rgba(0,0,0,1),  
  1px -1px 0 rgba(0,0,0,1),
  -1px 1px 0 rgba(0,0,0,1),
   1px 1px 0 rgba(0,0,0,1);

下面是代码的JSFIDLE：

CSS

#main {
color: #fff;
text-shadow:
   3px 3px 0 #000,
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
left: -200px;
margin: auto;
margin-top: auto;
position: relative;
top: 150px;
width: auto;
font-size: 1.5em;
}

ol {
    list-style-position: inside;
    padding-left: 0;
}

HTML

<div id="main">
            <h1 class="center">Friends list</h1>
            <ol>
                <li>Erin</li>
                <li>Jacob</li>
                <li>Frankie</li>
                <li>Bob</li>
            </ol>
</div>

好友列表
艾琳
雅各布
弗兰基
鲍勃

尝试以下操作：

#main {
    color: #fff;
    text-shadow:
     3px 3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    left: -200px;
    margin: auto;
    margin-top: auto;
    top: 150px;
    width: auto;
    font-size: 1.5em;
}

ol {
    counter-reset: li;
    list-style-type: none;
}

ol li {
    position:relative;
}

ol li:before {
    content: counter(li)'.';
    counter-increment: li;
    position:absolute;
    right:100%;
    margin-right:10px;
    text-shadow:
      3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}

---

我的最爱之一。通常，文本装饰不会传播到列表标记框，这就是为什么Chrome和Firefox不会将文本阴影应用到列表标记。但是，虽然项目符号有下划线没有多大意义，但项目符号（即列表样式类型，而不是列表样式图像）或数字没有文本阴影也没有任何意义。我在自己的Chrome和Firefox网站上经常看到这种情况，这对我来说真的是一种毁灭