文字阴影不落后渐变剪辑背景

Question

我想要获得徽标使用渐变填充剪辑，然后放置在它后面的文字阴影。然而，阴影似乎总是置于顶端？

很明显，我可以在SVG等中做到这一点，但由于其他原因，我想用CSS做到这一点。

我已经提前创造了一个小提琴“http://jsfiddle.net/Mgz6H/

请帮助。

感谢。

Answer 1

我用z-index的深度，创造了绝对的影子div元素。 请检查更新的代码here

CSS

.logo-shadow { 
    position:absolute; 
    top:0; 
    left:0; 
    text-shadow:3px 3px 3px black; 
    color:transparent; 
    z-index:0; 
} 

HTML

<div id="logo-container"> 
    <div class="logo"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
    <div class="logo-shadow"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
</div>​