内部文本阴影与CSS

我目前正在使用CSS3，并尝试实现如下文本效果（黑色模糊的内部阴影）：

但是我找不到在文本中创建文本阴影的方法。我想知道是否仍然有可能，因为box shadow元素能够像这样渲染内部阴影：

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

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

---

有什么想法吗？

你可以这样做。不幸的是，没有办法在文本阴影上使用插图，但你可以用颜色和位置来伪装它。将模糊向右向下，并沿右上角排列阴影。像这样的事情可能会奏效：

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

---

。。。但是你需要非常非常小心你使用的颜色，否则它会看起来不好看。它本质上是一种视错觉，因此不会在任何情况下都起作用。小字体看起来也不太好，所以也要注意这点。

试试这个小小的变体：

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

---

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

这看起来很有效：

---

他正在使用多个阴影来实现这种效果，如下所述：

你应该可以使用文本阴影来实现，呃，有人这样想：

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

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

---

这里有一个例子：

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

---

不需要多个阴影或任何类似的花式效果，只需在负y轴上偏移阴影即可

对于浅色背景上的深色文本：

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

如果背景较暗，则可以简单地反转颜色和y位置：

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

使用rgba值、不透明度和模糊来获得恰到好处的效果。这在很大程度上取决于您使用的颜色字体和背景，字体越重越好。

以下是我的最佳尝试：

。内部阴影{
颜色：透明；
背景色：白色；
文本阴影：0 0 20px rgba（198,28,39,0.8），0 0黑色；
字体系列：'ProclamateHeavy'；//或者任何能让你的船漂浮的东西
字体大小：150px；
}

内阴影

下面是我使用

：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属性需要与内容相同。演示：

这是我见过的最好的例子。

源代码在gitthub上

---

我在这个网站上使用它，它看起来也不错。看看它

基于

：之前
：在web\u designer的
技术之后，这里有一些更接近您的外观：

首先，将文本设置为内部阴影的颜色（OP为黑色）

现在，使用：after psuedo类创建原始文本的透明副本，直接放置在其顶部。为其指定一个无偏移的常规文字阴影。将原始文本颜色指定给阴影，并根据需要调整alpha


你们不能像PS中那个样完全控制阴影的扩散等，但对于较小的模糊值来说，这是可以接受的。阴影会超出文本的边界，因此如果您在具有高对比度背景前景的环境中工作，则阴影会很明显。对于对比度较低的项目，尤其是具有相同色调的项目，它不会太明显。例如，我已经能够使用此技术在金属背景中制作非常好看的蚀刻文本。
下面是一个使用背景剪辑CSS3属性实现真正插入文本阴影的伟大解决方案：

.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;
}

对于长方体阴影：

-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);

您可以看到联机文本和框阴影：

有关更多示例，您可以访问以下地址：
有一种更简单的方法来实现这一点

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

瞧
这是我在看了这里的一些想法后想到的。主要思想是文本的颜色与两个阴影混合，注意这是在灰色背景上使用的（否则白色不会很好地显示）

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


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

在这里，颜色是透明的，背景和顶部文本阴影是相同的颜色，具有不同的不透明度，模拟遮罩，第二个文本阴影是您实际想要的颜色的更暗、更饱和的版本（使用HSLA非常容易）


（顺便说一句，基于a的文本和样式）
我有几个例子需要在文本上使用内部阴影，下面的方法对我很有效：

.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%不透明度的文本可见，但通过第一个阴影不可见，这意味着它仅在第一个阴影移位的位置（左1倍，上2倍）在文本字母内部可见。若要更改此可见阴影的模糊，请修改第一层阴影的模糊参数

注意事项


只有在不必100%不透明度即可获得所需的文本颜色时，此选项才有效
只有当背景颜色为纯色时，这才有效（因此，对于提问者的特定示例，文本位于纹理背景上时，这不起作用）
中CSS的更精确解释

还有另一种方法可以获得一种奇特的黑色内部阴影错觉，

我将用三个简单的步骤来解释。假设我们有这个HTML：

<h1>Get this</h1>


第一步
让我们从使文本透明开始：

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


步骤2
现在，我们将背景裁剪成文本的形状：

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


步骤3
现在，魔术：我们将放置一个模糊的
tex
h1 {
  color: transparent;
  background-color: #cc8100;
}

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

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

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

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: 1px 1px transparent, -1px -1px black;