带有 CSS 的内部文本阴影

Inner text shadow with CSS

提问by ericteubert

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):

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

But I cannot find a way to create text shadows insidethe text. I wonder whether it is still possible because the box-shadow element is able to render shadow inside like this:

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

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

Any ideas?

有任何想法吗？

回答by Web_Designer

Here's a little trick I discovered using the :beforeand :afterpseudo-elements:

这是我使用: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 }

The title attribute needs to be the same as the content. Demo: http://dabblet.com/gist/1609945

title 属性需要与内容相同。演示：http: //dabblet.com/gist/1609945

回答by RobertPitt

You should be able to do it using the text-shadow, erm somethink like this:

你应该可以使用 text-shadow 来做到这一点，嗯，有些想法是这样的：

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

here's an example: http://jsfiddle.net/ekDNq/

这是一个例子：http: //jsfiddle.net/ekDNq/

回答by kendo451

Here's my best try:

这是我最好的尝试：

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

The problem is how to clip the shadow that bleeds around the edges!!! I tried in webkit using background-clip:text, but webkit renders the shadow above the background so it doesn't work.

问题是如何剪掉边缘流血的阴影！！！我在 webkit 中尝试使用 background-clip:text，但 webkit 将阴影呈现在背景上方，因此它不起作用。

Making a Text Mask with CSS?

用 CSS 制作文本掩码？

Without a top mask layer it is impossible to do a true inner shadow on text.

如果没有顶部遮罩层，就不可能在文本上制作真正的内部阴影。

Perhaps someone should recommend that the W3C add background-clip: reverse-text, that would cut a mask through the background instead of cutting the background to fit inside the text.

也许有人应该建议 W3C 添加background-clip: reverse-text，这将通过背景剪切蒙版，而不是剪切背景以适应文本。

Either that or render the text-shadow as part of the background and clip it with background-clip: text.

要么将 text-shadow 渲染为背景的一部分，然后用 background-clip: text 剪辑它。

I tried absolutely positioning an identical text element above it, but the problem is background-clip: text crops the background to fit inside the text, but we need the reverse of that.

我尝试在其上方绝对定位一个相同的文本元素，但问题是背景剪辑：文本裁剪背景以适合文本，但我们需要相反。

I tried using text-stroke: 20px white; on both this element and the one above it, but the text stroke goes in as well as out.

我尝试使用 text-stroke: 20px white; 在这个元素和它上面的元素上，但文本笔画进出。

Alternate Methods

替代方法

Since there is currently no way to make an inverted-text mask in CSS, you could turn to SVG or Canvas and make a text replacement image with the three layers to get your effect.

由于目前没有办法在 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.

由于 SVG 是 XML 的子集，因此 SVG 文本仍然可以选择和搜索，并且可以用比 Canvas 更少的代码来产生效果。

It would be harder to achieve this with Canvas because it doesn't have a dom with layers like SVG does.

使用 Canvas 实现这一点会更困难，因为它没有像 SVG 那样的带有层的 dom。

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

您可以在服务器端生成 SVG，也可以在浏览器中作为 javascript 文本替换方法生成。

Further Reading:

进一步阅读：

SVG versus Canvas:

SVG 与 Canvas：

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

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

Clipping and Masking with SVG Text:

使用 SVG 文本进行剪裁和遮罩：

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

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

回答by Alba Mendez

^{More precise explanation of the CSS in kendo451's answer.}

^{在kendo451's answer中对 CSS 的更精确解释。}

There's another way to get a fancy-hacky inner shadow illusion,
which I'll explain in three simple steps. Say we have this HTML:

还有另一种方法可以获得奇特的内部阴影错觉，
我将通过三个简单的步骤进行解释。假设我们有这个 HTML：

<h1>Get this</h1>

and this CSS:

和这个CSS：

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

Step 1

第1步

Let's start by making the text transparent:

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

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

Step 2

第2步

Now, we crop that backgroundto the shape of the text:

现在，我们将该背景裁剪为文本的形状：

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

Step 3

第 3 步

Now, the magic: we'll put a blurred text-shadow, which will be in front of the background, thus giving the impression of an inner shadow!

现在，魔术：我们把模糊text-shadow，这将是在背景前，从而使内侧阴影的印象！

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

See the final result.

查看最终结果。

Downsides?

缺点？

• Only works in Webkit (background-clipcan't be text).
• Multiple shadows? Don't even think.
• You get an outer glow too.

• 仅适用于 Webkit（background-clip不能text）。
• 多重阴影？也别想。
• 你也会得到外在的光芒。

回答by Zombyii

An elegant examplewithout the need for a positioned wrapper or duplicative content in the markup:

一个优雅的例子，不需要标记中的定位包装或重复内容：

: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>

Looks good on dark backgrounds as well:

在深色背景上看起来也不错：

: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>

AND ME LINKAND ME2 LINK

和我链接和我 2链接

回答by Dylan

There's no need for multiple shadows or anything fancy like that, you just have to offset your shadow in the negative y-axis.

不需要多个阴影或任何类似的东西，你只需要在负 y 轴上抵消你的阴影。

For dark text on a light background:

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

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

If you have a dark background then you can simply invert the color and y-position:

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

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

Play around with the rgba values, the opacity, and the blur to get the effect just right. It will depend a lot on what color font and background you have, and the weightier the font, the better.

调整 rgba 值、不透明度和模糊度以获得恰到好处的效果。这在很大程度上取决于您拥有什么颜色的字体和背景，并且字体越重越好。

回答by hollsk

You can kind of do this. Unfortunately there's no way to use an inset on text-shadow, but you can fake it with colour and position. Take the blur right down and arrange the shadow along the top right. Something like this might do the trick:

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

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

... but you'll need to be really, really careful about which colours you use otherwise it will look off. It is essentially an optical illusion so won't work in every context. It also doesn't really look great at smaller font sizes, so be aware of that too.

......但是你需要非常非常小心你使用的颜色，否则它会看起来很糟糕。它本质上是一种视错觉，因此不适用于所有情况。它在较小的字体大小下看起来也不是很好，所以也要注意这一点。

回答by Mike

Try this little gem of a variation:

试试这个变体的小宝石：

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

I usually take "there's no answer" as a challenge

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

回答by esjay

I've seen many of the proposed solutions, but none were quite what I was hoping.

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

Here's my best hack at this, where the color is transparent, the background and the top text-shadow are the same color with varying opacities, simulating the mask, and the second text-shadow is a darker, more saturated version of the color you actually want (pretty easy to do with HSLA).

这是我在这方面的最佳技巧，其中颜色是透明的，背景和顶部文本阴影是相同的颜色，具有不同的不透明度，模拟蒙版，第二个文本阴影是更暗、更饱和的颜色版本实际上想要（使用 HSLA 很容易做到）。

(btw, text and styling based upon a dupe thread's OP)

（顺便说一句，文本和样式基于欺骗线程的 OP）

回答by Nick Coons

I've had a few instances where I've needed inner shadows on text, and the following has worked out well for me:

我遇到过一些需要在文本上添加内部阴影的情况，以下对我来说效果很好：

.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:

这将文本的不透明度设置为 80%，然后创建两个阴影：

• 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.
• The second is a black shadow which is visible through the 80% opacity text but not through the first shadow, which means it's visible inside the text letters only where the first shadow is displaced (1px from the left and 2px from the top). To change the blur of the this visible shadow, modify the blur parameter for the first layer shadow.

• 第一个是白色阴影（假设文本在白色背景上）从左侧偏移 1px，从顶部偏移 2px，模糊 3px。
• 第二个是黑色阴影，它通过 80% 不透明度文本可见，但不能通过第一个阴影看到，这意味着它仅在第一个阴影发生位移的文本字母内可见（距左侧 1 像素，距顶部 2 像素）。要更改此可见阴影的模糊，请修改第一层阴影的模糊参数。

Caveats

注意事项

• This will only work if the desired color of the text can be achieved without it having to be at 100% opacity.
• This will only work if the background color is solid (so, it won't work for the questioner's specific example where the text sits on a textured background).

• 这只有在不需要 100% 不透明度的情况下可以获得所需的文本颜色时才有效。
• 这仅在背景颜色为纯色时才有效（因此，它不适用于提问者的特定示例，其中文本位于带纹理的背景上）。