CSS阴影在IE/Edge中可用，不在Chrome或Firefox中

Chrome或Firefox中此列表中的数字没有阴影（它们只是白色）。在IE/Edge中他们有一个影子。我正试图让Firefox和Chrome中的影子也显示出来。CSS阴影在IE/Edge中可用，不在Chrome或Firefox中

我尝试添加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>

来源

2017-02-15 PopSmith

我的最爱之一。通常情况下，文字装饰不会传播到列表标记框，这就是Chrome和Firefox不将文字阴影应用于列表标记的原因。但是，虽然子弹点没有强调下划线的意义，但对于子弹（即列表式样式，而不是列表式图像）或数字*不是*来说，它们都没有任何意义一个文字阴影。我一直在Chrome和Firefox的自己的网站上看到这一点，它真的毁了我。 – BoltClock

http://stackoverflow.com/q/23853647/2803565可能的重复 –

尝试以下操作：

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

来源

2017-02-15 18:00:36 javc91

CSS阴影在IE/Edge中可用，不在Chrome或Firefox中

回答

相关问题