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 text-shadow需要四个值： distance-x ， distance-y ， blur 和颜色。

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

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

3 个答案: