爲什麼這些文字陰影效果不起作用？

 <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（我知道這是無用的，但我只是試過任何方法）。我也刪除了所有新行，但仍然沒有文字 - 陰影只出現簡單的文字。任何提示爲什麼會發生？爲什麼這些文字陰影效果不起作用？

來源

2014-08-27 Jayesh Kakatkar

你爲什麼要設置'了'p'元素的style'屬性裏面的CSS？爲什麼不製作課程並在其周圍包裝「div」？ – 2014-08-27 14:00:28

您在這些文字陰影中設置了太多參數。刪除前導0.此外，爲什麼你想在同一文本中設置17個不同的陰影？ – Havenard 2014-08-27 14:04:33

我說我跟隨http://msdn.microsoft.com/en-us/hh867756.aspx 這正是寫在那裏。我也嘗試刪除前導零。這是行不通的 – 2014-08-27 14:06:33

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%),

來源

2014-08-27 14:08:04 Moob

我刪除了所有文字陰影中的前導零，但它仍然無效。 – 2014-08-27 14:11:01

@JayeshKakatkar正如我評論，你錯過了一個'，'在2個值之間 – 2014-08-27 14:12:41

我已經修復了這個問題。 – 2014-08-27 14:16:50

作爲一種變通方法，您可以使用：
http://css3gen.com/text-shadow/
http://css3generator.com/
生成text-shadow代碼需要。使用this reference來熟悉語法。

來源

2014-08-27 14:24:15

我能夠在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); 
}

來源

2014-08-27 14:28:04 ZombieCode

爲什麼這些文字陰影效果不起作用？

回答

相關問題