是否可以仅使用CSS / CSS3来剪切文本效果?或图像是获得此效果的唯一选择。
答案 0 :(得分:10)
这应该有效:
这是我使用:before
和:after
伪元素发现的一个小技巧:
答案 1 :(得分:3)
text-shadow
是你的朋友。 See this page有很多例子可以用它来实现。示例#8看起来很有希望。
答案 2 :(得分:2)
它支持白色背景和深色文字
所有功劳归于创作者
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; }
答案 3 :(得分:1)
你真正需要的是inset
:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately:“&lt; shadow&gt;与'box-shadow'属性定义的相同,但不允许使用'inset'关键字。”
答案 4 :(得分:0)
您可以使用文本阴影样式为左上角设置阴影。它看起来很接近你想要的东西,但据我所知,没有办法在CSS / CSS3中完全找到你想要的东西
答案 5 :(得分:0)
是的,你可以通过CSS和文本实现这种效果,但它有点疯狂。基本上你创建了一堆灰度为零的css3径向和线性渐变,不透明度为零,小心地将它们放在你的文本上。但是你最好在photoshop中做这件事。
答案 6 :(得分:0)
使用提到的伪元素Web_Designer的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;
}
这有点简单 - 要获得凹陷的柔和边缘,你使用的文字阴影:伪后并使其透明,而不是使用两个伪。在我看来,它看起来也更清洁 - 它可以在更大的尺寸上工作。我不知道它有多快,尽管你可能会谨慎使用文字阴影。