为什么这些文字阴影效果不起作用？

Question

 <p style="color: hsl(230, 100%, 50%); 
     text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 
     0 3px 2px 0px hsla(330, 100%, 15%, 0.5), 
     0 3px 0 3px hsl(350, 100%, 50%), 
     0 5px 0 3px hsl(350, 100%, 25%), 
     0 6px 2px 3px hsla(350, 100%, 15%, 0.5), 
     0 6px 0 9px hsl(20, 100%, 50%), 
     0 8px 0 9px hsl(20, 100%, 25%), 
     0 9px 2px 9px hsla(20, 100%, 15%, 0.5), 
     0 9px 0 18px hsl(50, 100%, 50%) 
     0 11px 0 18px hsl(50, 100%, 25%), 
     0 12px 2px 18px hsla(50, 100%, 15%, 0.5), 
     0 12px 0 30px hsl(70, 100%, 50%), 
     0 14px 0 30px hsl(70, 100%, 25%), 
     0 15px 2px 30px hsla(70, 100%, 15%, 0.5), 
     0 15px 0 45px hsl(90, 100%, 50%), 
     0 17px 0 45px hsl(90, 100%, 25%), 
     0 17px 2px 45px hsla(90, 100%, 15%, 0.5);">Text Shadow</p> 

这是我的代码，我从http://msdn.microsoft.com/en-us/hh867756.aspx 复制它应该给该页面上的颜色幸福效果。我正在使用Firefox 30.我也尝试在opera中打开它，但它在那里也不工作。 我试图将hsla更改为rgb（我知道这是无用的，但我只是试过任何方法）。 我也删除了所有新行，但仍然没有文字 - 阴影只出现简单的文字。任何提示为什么会发生？

Answer 1

CSS文字阴影需要四个值： 距离-X，距离-Y，模糊，并且颜色。

E.G：

p { 
    text-shadow: 1px 1px 1px #000, 
       3px 3px 5px blue; 
} 

只有IE接受额外传播值。

另外（如注释）你在这里失踪之间的逗号：

0 9px 0 18px hsl(50, 100%, 50%) <<<< 
0 11px 0 18px hsl(50, 100%, 25%), 

Answer 2

作为一种变通方法，您可以使用：
http://css3gen.com/text-shadow/
http://css3generator.com/
生成text-shadow代码需要。使用this reference来熟悉语法。

Answer 3

我能够在FF（v31）中工作，但像Moob所说：IE只接受传播，所以这个修复不是一个确切的副本。我已经在Codepen上发布了这个例子。我想通过一些调整，你可以看起来更像是一个例子。

CodePen Example

h2 { 
    font-size: 130px; 
    font-family: Arial; 
    color: hsl(330, 100%, 50%); 
    text-shadow: 2px 0px hsl(330, 100%, 25%), 
      3px 2px 0px hsla(330, 100%, 15%, 0.5),    
      3px 3px hsl(350, 100%, 50%), 
      5px 3px hsl(350, 100%, 25%), 
      6px 2px 3px hsla(350, 100%, 15%, 0.5),    
      6px 9px hsl(20, 100%, 50%), 
      8px 9px hsl(20, 100%, 25%), 
      9px 2px 9px hsla(20, 100%, 15%, 0.5),    
      9px 18px hsl(50, 100%, 50%), 
      11px 18px hsl(50, 100%, 25%), 
      12px 2px 18px hsla(50, 100%, 15%, 0.5),    
      12px 30px hsl(70, 100%, 50%), 
      14px 30px hsl(70, 100%, 25%), 
      15px 2px 30px hsla(70, 100%, 15%, 0.5),    
      15px 45px hsl(90, 100%, 50%), 
      17px 45px hsl(90, 100%, 25%), 
      17px 2px 45px hsla(90, 100%, 15%, 0.5); 
}