你能做到的。不幸的是，没有办法在文本阴影上使用插入，但是你可以用颜色和位置来伪造它。把红蓝侠拿下来，然后把影子放在右上角。像这样的东西可能会奏效:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

但是你要非常非常小心你用的是哪种颜色否则会看起来不好。这本质上是一个错视，所以不会在任何情况下都奏效。它在小字体上看起来也不怎么样，所以也要注意这一点。

Try this little gem of a variation:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

我通常把“没有答案”当作挑战

看起来起作用了: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

他使用多重阴影来达到这种效果，就像这里解释的那样: http://www.w3.org/Style/Examples/007/text-shadow#multiple

你应该能够使用文本阴影，呃，像这样想:

.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}

这里有一个例子: http://jsfiddle.net/ekDNq/

这里有一个关于如何做到这一点的链接，它应该是你正在寻找的:

Http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

不需要多个阴影或者任何类似的花哨的东西，你只需要在负 y 轴上偏移阴影。

对于浅色背景上的深色文字:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

如果你有一个深色的背景，那么你可以简单地反转颜色和 y 位置:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

使用 rgba 值、不透明度和模糊效果可以得到恰到好处的效果。这在很大程度上取决于你使用什么颜色的字体和背景，而且字体越重越好。

这是我最好的尝试:

    .inner_shadow {
color:transparent;
background-color:white;
text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
font-family:'ProclamateHeavy';  // Or whatever floats your boat
font-size:150px;
}

<span class="inner_shadow">Inner Shadow</span>

问题是如何夹住阴影，流血周围的边缘! ! ！我尝试在 webkit 中使用背景剪辑: 文本，但 webkit 渲染背景上方的阴影，所以它不工作。

用 CSS 制作文本蒙版？

没有顶部蒙版图层是不可能做一个真正的文字内阴影。

也许有人应该建议 W3C 添加 反向文本，这样可以通过剪切背景而不是剪切背景来适应文本。

或者将文本阴影作为背景的一部分呈现，并使用 backest- 剪辑: text 对其进行剪辑。

我尝试在它上面绝对定位一个相同的文本元素，但问题是背景剪辑: 文本裁剪背景以适应文本，但我们需要反过来。

我尝试在这个元素和上面的元素上使用文本笔画: 20px 白色; 但是文本笔画既可以输入也可以输出。

替代方法

由于目前还没有办法在 CSS 中制作一个倒置的文本掩码，您可以转向 SVG 或 Canvas，使用三个图层制作一个文本替换图像，以获得您的效果。

Since SVG is a subset of XML, SVG text would still be select-able and searchable, and the effect can be produced with less code than Canvas.

使用 Canvas 实现这一点会比较困难，因为它没有像 SVG 那样拥有层的空间。

You could produce the SVG either server-side, or as a javascript text-replacement method in the browser.

进一步阅读:

SVG 与 Canvas:

Http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

使用 SVG 剪切和掩蔽文本:

http://www.w3.org/TR/SVG/text.html#TextElement

下面是我使用 :before和 :after伪元素发现的一个小窍门:

.depth {
color: black;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

Title 属性需要与 content 相同

这无疑是我见过的最好的例子。 Http://lab.simurai.com/carveme/

消息来源在 Gitthub 上 https://github.com/simurai/lab/tree/gh-pages/carveme

我从这个网站使用它，也看起来不错。看看它 内心的阴影

基于 web _ design 的 :before :after技术，这里有一些更接近你的外观的东西:

首先，将文本设置为内部阴影的颜色(在 OP 中为黑色)。

现在，使用一个: after psuedo 类创建原始文本的透明副本，直接放置在它的上面。为它分配一个没有偏移量的常规文本阴影。将原始文本颜色分配给阴影，并根据需要调整 alpha。

Http://dabblet.com/gist/2499892

你不能像在 PS 中那样完全控制阴影的展开等等，但是对于较小的模糊值来说还是可以的。阴影超过了文本的边界，所以如果你在一个背景-前景对比度很高的环境中工作，阴影就会很明显。对于对比度较低的项目，尤其是具有相同色调的项目，它不会太明显。例如，我已经能够使用这种技术在金属背景下制作非常漂亮的蚀刻文本。

Here's a great solution for TRUE inset text shadow using the background-clip CSS3 property:

.insetText {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

盒子阴影:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

你可以看到在线文字和方框阴影: 在线文本和方框阴影

更多的例子，你可以去这个地址: 更多示例代码 freeclup

有一个更简单的方法来实现这一点

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

好了

下面是我在看了这里的一些想法后得出的结论。主要的想法是文本的颜色混合了两个阴影，并注意这是在灰色背景上使用(否则白色不会显示良好)。

.inset {
color: rgba(0,0,0, 0.6);
text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

似乎每个人都有自己的答案。我喜欢@Web _ Designer 的解决方案。但它不需要如此复杂，你仍然可以得到模糊的内部阴影，你正在寻找。

Http://dabblet.com/gist/3877605

.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}


.depth:before {
content: attr(title);
color: transparent;
position: absolute;
text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

我已经看到了许多提出的解决方案，但没有一个是我所希望的。

这里是 我最擅长的黑客技巧，颜色是透明的，背景和顶部的文本阴影是相同的颜色和不同的不透明度，模拟蒙版，第二个文本阴影是一个更深，更饱和的颜色你实际上想要的(非常容易做 HSLA)。

(顺便说一下，文字和样式基于 欺骗线程的操作)

我曾经有过一些需要文本内部阴影的例子，下面的例子对我来说效果很好:

.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

This sets the opacity of the text to 80%, and then creates two shadows:

• The first is a white shadow (assuming the text is on a white background) offset 1px from the left and 2px from the top, blurred 3px.
• 第二个是黑色阴影，可以通过80% 不透明度的文本看到，但是不能通过第一个阴影看到，这意味着它只能在文本字母中第一个阴影被移位的地方看到(左边1像素，上边2像素)。要更改这个可见阴影的模糊度，请修改第一层阴影的模糊度参数。

警告

• 这将只有当所需的颜色的文本可以实现，而不必在100% 的不透明度。
• 这只有在背景颜色是纯色的情况下才有效(因此，它不适用于提问者的特定例子，即文本位于有纹理的背景上)。

^{在 Kendo451的回答中对 CSS 的更精确的解释。}

还有另一种方法可以得到一个奇怪的内阴影幻象,
我将用三个简单的步骤来解释:

<h1>Get this</h1>

还有这个 CSS:

h1 {
color: black;
background-color: #cc8100;
}

第一步

让我们从让文本透明化开始:

h1 {
color: transparent;
background-color: #cc8100;
}

Step 2

现在，我们 剪掉背景到文本的形状:

h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}

第三步

现在，魔术: 我们将把一个模糊的 text-shadow，这将是 在前面 的背景，从而给人一个内部阴影的印象

h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
text-shadow: 0px 2px 5px #f9c800;
}