带有 CSS 3 的浅色文本阴影答案

【问题标题】：light text shade with CSS 3带有 CSS 3 的浅色文本阴影
【发布时间】：2011-10-15 03:19:26
【问题描述】：

有没有可能和这张图一样的文字效果（内阴影、阴影）：

使用 CSS3，以及如何使用？

【问题讨论】：

试试this 或this

【解决方案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 中看到上面的 sn-p：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/

【讨论】：

不.. Fiddle 没有改变。你到底用的是什么浏览器？铬对。这很好，但是从 FF 看它然后忘记这个方法，因为它不是很兼容浏览器。不过，我会给你投票，因为问题没有指定浏览器兼容性。
好的，第一个。干得好！

【解决方案2】：

您也可以使用-webkit-mask-image 创建它 - 但它再次只能在 webkit 浏览器中工作。您需要在 prohotshop 中创建透明的多云图像（您希望它看起来的方式 - 我只是做了一个渲染/云并使用 aplha 通道对其进行了转换 - 通过稍微调整它，您可以获得与您的设计相同的外观效果）然后将其用作蒙版并将蒙版剪辑到文本中。 Webkit 非常适合这一点，但由于并非所有浏览器都支持它。

目前无法使用 css3 创建完全相同效果

http://jsfiddle.net/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>

【讨论】：

【解决方案3】：

不是真的，但你可以尝试各种差不多。很多例子请见this post：

【讨论】：

谢谢，但我没有给出我想要的相同文本效果。