Работа с CSS-теневыми работами в 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; 
}