css - 文本阴影不在渐变剪辑背景后面

Question

我正在尝试让徽标使用带有剪辑的渐变填充，然后在其后面放置一个文本阴影。然而阴影似乎总是放在上面？

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

我创建了一个小提琴“http://jsfiddle.net/Mgz6H/

请帮忙。

提前致谢。

Answer 1

我使用 z-index 作为深度，并为阴影创建了绝对 div 元素。请在此处检查更新的代码

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>​