CSS shadow在IE / Edge中有效，而在Chrome或Firefox中不可用

Question

在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);

这是下面代码的jsfiddle： https ://jsfiddle.net/wxLftaLd/

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>

Answer 1

请尝试以下操作：

#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;
}