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/