CSS的内部文字阴影
Answers:
这是我使用: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 }标题属性必须与内容相同。演示：http：//dabblet.com/gist/1609945
您应该可以使用text-shadow来做到这一点，erm应该是这样的：
.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}这是一个示例：http : //jsfiddle.net/ekDNq/
这是我的最佳尝试：
.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中使用background-clip：text进行了尝试，但是webkit在背景上方渲染阴影，因此它不起作用。
用CSS制作文本蒙版？
没有顶部遮罩层，就不可能在文本上形成真实的内部阴影。
也许有人应该建议W3C添加background-clip：reverse-text，这将在背景中剪切蒙版，而不是剪切背景以使其适合文本。
要么渲染文本阴影作为背景的一部分，然后用background-clip：text对其进行剪辑。
我尝试将一个相同的文本元素绝对定位在其上方，但是问题是background-clip：text裁剪背景以适合文本内部，但是我们需要相反的操作。
我尝试使用笔画：20px白色；在此元素及其上方的元素上都可以，但是文字笔划可以上下移动。
替代方法
由于当前无法在CSS中制作文本倒置蒙版，因此您可以使用SVG或Canvas并使用三层制作文本替换图像来获得效果。
由于SVG是XML的子集，因此SVG文本仍然可以选择和搜索，并且可以用比Canvas更少的代码来产生效果。
使用Canvas很难做到这一点，因为它没有像SVG这样的图层。
您可以在服务器端或在浏览器中以javascript替换文本的方式生成SVG。
进一步阅读：
SVG与Canvas：
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
使用SVG文本进行剪切和遮罩：
kendo451的答案中对CSS的更精确的解释。
还有一种获得幻想的内部阴影幻觉的方法，
我将通过三个简单的步骤对其进行说明。假设我们有以下HTML：
<h1>Get this</h1>和这个CSS：
h1 {
color: black;
background-color: #cc8100;
}
第1步
让我们开始使文本透明：
h1 {
color: transparent;
background-color: #cc8100;
}
第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;
}
查看最终结果。
缺点？
- 仅可在Webkit中使用（
background-clip不能text）。 - 多个阴影？甚至不要想。
- 您也会得到外在的光芒。
text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;呢
一个优雅的示例，无需在标记中定位包装器或重复内容：
:root {
background: #f2f2f2;
}
h1 {
background-color: #565656;
font: bold 48px 'Futura';
color: transparent;
text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}<center>
<h1>Text With Inner Shadow</h1>
</center>在深色背景上看起来也不错：
:root {
--gunmetal-gray: #2a3439;
background: var(--gunmetal-gray);
}
h1[itemprop="headline"] {
font-family: 'Futura';
font-size: 48px;
padding-bottom: 0.35rem;
font-variant-caps: all-small-caps;
background-color: var(--gunmetal-gray);
color: transparent;
text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
filter: brightness(3);
}<center>
<h1 itemprop="headline">Text With Inner Shadow</h1>
</center>您可以执行此操作。不幸的是，无法在文本阴影上使用插图，但是您可以使用颜色和位置来伪造它。右下模糊并沿着右上角排列阴影。这样的事情可能会解决问题：
background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;...但是您需要非常，非常小心地使用所用的颜色，否则它将看起来不对。这本质上是一种错觉，因此并非在每种情况下都有效。较小的字体看起来也不是很好，所以也要注意这一点。
不需要多个阴影或类似的东西，您只需要在负y轴上偏移阴影即可。
对于浅色背景上的深色文字：
text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);如果背景较暗，则可以简单地反转颜色和y位置：
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);尝试使用rgba值，不透明度和模糊效果来获得恰到好处的效果。这将取决于您拥有哪种颜色的字体和背景，以及字体越重越好。
试试这个变体的小宝石：
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);我通常以“没有答案”为挑战
在某些情况下，我需要在文本上添加内部阴影，以下内容对我来说很有效：
.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}这会将文本的不透明度设置为80％，然后创建两个阴影：
- 第一个是白色阴影（假设文本位于白色背景上），其左侧偏移1px，顶部偏移2px，模糊3px。
- 第二个是黑色阴影，可通过不透明度为80％的文本看到，但不能通过第一个阴影看到，这意味着只有在第一个阴影发生位移时（在左侧为1px，在顶部为2px），它才在文本字母内部可见。要更改此可见阴影的模糊，请修改第一层阴影的blur参数。
注意事项
- 仅当可以实现所需的文本颜色而不必使其不透明度为100％时，这才起作用。
- 这仅在背景颜色为纯色时才有效（因此，对于发问者的特定示例（文本位于带纹理的背景上）将不起作用）。
这是一个讨论如何执行此操作的链接，它应该是您要寻找的内容：
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
看起来它正在运行：http : //tips4php.net/2010/08/nice-css-text-shadow-effects/
他正在使用多个阴影来实现该效果，如下所述：http : //www.w3.org/Style/Examples/007/text-shadow#multiple
似乎每个人都对此有一个答案。我喜欢@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);
}这很容易是我所见过的最好的例子。 http://lab.simurai.com/carveme/
来源在gitthub上 https://github.com/simurai/lab/tree/gh-pages/carveme
:before :after以web_designer 的技术为基础，这看起来更接近您的外观：
首先，使文本成为内部阴影的颜色（在OP中为黑色）。
现在，使用：after psuedo类创建原始文本的透明副本，将其直接放置在其顶部。给它分配一个普通的文本阴影，且不带偏移量。将原始文本颜色分配给阴影，然后根据需要调整Alpha。
http://dabblet.com/gist/2499892
您无法像在PS中那样完全控制阴影的散布等，但是对于较小的模糊值，这是完全可以通过的。阴影超出了文本的边界，因此，如果您在具有高对比度背景-前景的环境中工作，这将是显而易见的。对于对比度较低的项目，尤其是具有相同色相的项目，不太明显。例如，使用这种技术，我已经能够在金属背景中制作出非常漂亮的蚀刻文字。
这是使用background-clip CSS3属性解决TRUE插入文本阴影的好方法：
.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;
}尝试使用此示例来插入文字阴影。这是HTML
<h1 class="inset-text-shadow">Inset text shadow trick</h1>和CSS
body {
background: #f8f8f8;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text-shadow {
/* Shadows are visible under slightly transparent text color */
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}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
用于小尺寸按钮上的普通大小的文本
当在带有小字体的小按钮上使用时，我发现此页面上的其他想法失去了效力。这个答案是RobertPitt的答案的扩展。
这是次要的调整：
text-shadow: 1px 1px transparent, -1px -1px black;注意：
我用这个网站来细化色调。
我正在这个网站上使用它，看起来也不错。看看里面的影子