是否可以只使用css/css3来获得这样的剪切文本效果?

这应该有效:
这是我发现的一个小技巧 :before 和 :after 伪元素:

http://dabblet.com/gist/1609945

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

我发现了这个 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; }

你真正需要的是 inset :

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

Unfortunately :“<shadow>与为box shadow属性定义的内容相同,但不允许使用inset关键字。”

可以使用文本阴影样式为左上角设置阴影。它将接近你正在寻找的东西,但据我所知,没有办法精确地做你在css/css3中所寻找的东西。

是的,你可以用CSS和文本来达到这种效果,但这有点疯狂。基本上,创建一组不透明度为零的灰色零CSS3径向和线性渐变,以及 仔细地 把它们放在文本上。但你最好还是在photoshop上做。

一 slightly softer way 使用上述伪元素的网页设计师:

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

这有点简单——要想得到抑郁症的软边缘,你可以使用“伪后”的文本阴影,并使其透明,而不是使用两个伪。在我看来,它看起来也很干净——它可以在更大的尺寸下工作。我不知道它有多快,尽管你可能会尽量少用文本阴影。