text - 使用 CSS 3 的浅色文本阴影

Question

有没有可能和这个图片一样的文字效果(内阴影，阴影):

使用 CSS3，如何使用？

Answer 1

仅限 WebKit(Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

在这里你可以在 JsFiddle 中看到上面的代码片段:http://jsfiddle.net/HkTqe/6/

Firefox 和 WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

请注意，您必须按此顺序有两个具有相同文本内容的 div；否则它不会工作。

两种技术的比较:http://jsfiddle.net/bABuM/