是否可以仅使用 CSS/CSS3 获得这样的剪切文本效果？答案

【问题标题】：Is it possible to get cut out text effect like this using CSS/CSS3 only?是否可以仅使用 CSS/CSS3 获得这样的剪切文本效果？
【发布时间】：2011-04-27 10:58:57
【问题描述】：

是否可以仅使用 CSS/CSS3 获得像这样的剪切文本效果？或图像是获得此效果的唯一选项。

【问题讨论】：

不投票关闭作为副本，因为我不知道它与您想要的东西有多相似（那里也没有明确的答案）但这是一个相当相似的问题：stackoverflow.com/questions/2889501/inner-text-shadow-with-css
@David - 是的，这两个问题都很相似，我应该结束我的问题。或者我可以将我的问题与你链接的问题合并
好吧，如果你说它们相似，我会投票赞成结束，如果人们同意，这一切都会得到解决。无需您采取行动。
@David - 是的，这两个问题都在询问几乎相同的效果。在问我的问题之前，我会搜索“剪切文本效果”。

标签： css

【解决方案1】：

我发现了这个 http://jsfiddle.net/NeqCC/

它支持白色背景和深色文本

所有功劳归创作者所有

HTML

<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos

Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)

Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>

CSS

body {
    /* This has to be same as the text-shadows below */
    background: #def;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(10,60,150, 0.8);
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }

【讨论】：

【解决方案2】：

slightly softer way 提到使用伪元素 Web_Designer：

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

.depth:after {
    text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
    content: attr(title);
    padding: 50px;
    color: transparent;
    position: absolute;
    top: 1px; 
    left: 1px;
}

这有点简单 - 要获得凹陷的软边缘，您可以使用 :after 伪的文本阴影并使其透明，而不是使用两个伪。在我看来，它看起来也更干净——它可以在更大的尺寸上工作。我不知道它有多快，尽管你可能会谨慎使用 text-shadow。

【讨论】：

【解决方案3】：

这应该可行：
这是我使用:before 和:after 伪元素发现的一个小技巧：

http://dabblet.com/gist/1609945

【讨论】：

【解决方案4】：

你真正需要的是inset：

    text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */

Unfortunately: " 与为 ‘box-shadow’ 属性定义的相同，只是不允许使用 ‘inset’ 关键字。”

【讨论】：

对于这种疯狂先生，一个非常低级的解决方案是让 JavaScript（或语义 HTML）在文本的中心创建一个透明文本（这会很棘手），然后在其上应用阴影text ;) 这将创建伪逼真的嵌入阴影 ^_^

【解决方案5】：

是的，您可以使用 CSS 和文本来实现这种效果，但它有点疯狂。基本上，您创建了一堆不透明度为零的灰色零 css3 径向和线性渐变，并小心将它们放置在您的文本上。但你最好在 Photoshop 中执行此操作。

【讨论】：

【解决方案6】：

text-shadow 是你的朋友。 See this page 有很多例子，你可以用它实现什么。示例 #8 看起来很有希望。

【讨论】：

这对我来说也有一天会派上用场！谢谢！ +1
答案应该建议代码，而不仅仅是链接。链接很快消失，链接中的链接消失得更快，留下好的答案就像一棵枯死的大树一样被掏空。
@jerseyboy：我不会在这里复制一个 13 页的网络博客。
@AaronDigulla：复制一个 13 页的网络博客是不明智的，但指向不是原始来源的页面也是如此。
@dinchev：试试谷歌。新网址是jotarun.posterous.com/text-embossing-technique-with-css

【解决方案7】：

您可以使用 text-shadow 样式为左上角设置阴影。它看起来很接近你正在寻找的东西，但据我所知，没有办法完全按照你在 CSS/CSS3 中寻找的东西

【讨论】：