blocks|key|2016828|text|下面是我使用:before和:after伪元素发现的一个小技巧：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2016829|.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+}|code-block|syntax|javascript|2016830|title属性需要与内容相同。演示：http://dabblet.com/gist/1609945|2016831|entityMap|0|LINK|mutability|MUTABLE|url|http://dabblet.com/gist/1609945^0|6|7|E|6|0|0|I|V|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Here's a little trick I discovered using the <code>:before</code> and <code>:after</code> pseudo-elements:

<pre><code>.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 }
</code></pre>

The title attribute needs to be the same as the content. Demo: <a href="http://dabblet.com/gist/1609945" rel="noreferrer">http://dabblet.com/gist/1609945</a>

blocks|key|1802862|text|你应该能够使用文本阴影来做到这一点，呃，有些人这样认为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1802863|.inner_text_shadow
{
++++text-shadow:+1px+1px+white,+-1px+-1px+#444;
}|code-block|syntax|javascript|1802864|下面是一个例子：http://jsfiddle.net/ekDNq/|offset|length|1802865|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ekDNq/^0|0|0|8|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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

<pre><code>.inner_text_shadow
{
 text-shadow: 1px 1px white, -1px -1px #444;
}
</code></pre>

here's an example: <a href="http://jsfiddle.net/ekDNq/">http://jsfiddle.net/ekDNq/</a>

blocks|key|1802556|text|你可以这样做。不幸的是，没有办法在文本阴影上使用插图，但你可以用颜色和位置来伪造它。取下模糊的右下方，沿着右上角排列阴影。下面这样的代码可能会起到作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1802557|background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px+1px+0+#FFFFFF;|code-block|syntax|javascript|1802558|..。但是你需要非常非常小心的选择你所使用的颜色，否则它会看起来不对劲。它本质上是一种视觉错觉，因此并不是在所有情况下都有效。它在较小的字体大小下看起来也不是很好，所以也要注意这一点。|1802559|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

<pre><code>background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;
</code></pre>

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

blocks|key|2016693|text|不需要多个阴影或任何花哨的东西，你只需要在负y轴上偏移你的阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2016694|对于浅色背景上的深色文本：|2016695|text-shadow:+0px+-1px+0px+rgba(0,+0,+0,+.75);|code-block|syntax|javascript|2016696|如果你有一个深色的背景，那么你可以简单地反转颜色和y位置：|2016697|text-shadow:+0px+1px+0px+rgba(255,+255,+255,+0.75);|2016698|使用rgba值、不透明度和模糊来获得恰到好处的效果。这在很大程度上取决于你有什么颜色的字体和背景，字体越重越好。|2016699|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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

For dark text on a light background:

<pre><code>text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);
</code></pre>

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

<pre><code>text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
</code></pre>

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.

blocks|key|2018298|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2018299|这是my+best+hack+at+this，它的颜色是透明的，背景和顶部的文本阴影是相同的颜色，不透明度不同，模拟了蒙版，第二个文本阴影是你真正想要的颜色的更暗，更饱和的版本(用HSLA很容易做到)。|offset|length|2018300|​|2018301|📷|atomic|2018302|2018303|(顺便说一句，基于dupe+thread's+OP的文本和样式)|2018304|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/esjay/pen/nkhFe|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/60740ae3ad81df9bc65e30cebe6546dd.jpeg|imageAlt|2|https://stackoverflow.com/questions/4230383/inset-text-effect-with-css-text-shadow^0|0|2|K|0|0|0|0|1|1|0|0|9|G|2|0^^$0|@$1|2|3|-4|4|5|6|12|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|13|7|@]|8|@$C|14|D|15|1|16]]|9|$]]|$1|E|3|F|4|5|6|17|7|@]|8|@]|9|$]]|$1|G|3|H|4|I|6|18|7|@]|8|@$C|19|D|1A|1|1B]]|9|$]]|$1|J|3|F|4|5|6|1C|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|1D|7|@]|8|@$C|1E|D|1F|1|1G]]|9|$]]|$1|M|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]]|N|$O|$4|P|Q|R|9|$S|T]]|U|$4|V|Q|W|9|$X|Y|Z|-4]]|10|$4|P|Q|R|9|$S|11]]]]

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

Here's <a href="http://codepen.io/esjay/pen/nkhFe" rel="nofollow noreferrer">my best hack at this</a>, 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).

<img src="https://i.stack.imgur.com/beCTs.jpg" alt="enter image description here">

(btw, text and styling based upon a <a href="https://stackoverflow.com/questions/4230383/inset-text-effect-with-css-text-shadow">dupe thread's OP</a>)

blocks|key|1802900|text|这里有一个关于如何做到这一点的链接，它应该是你正在寻找的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1802901|http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/|offset|length|1802902|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Here is a link talking about how to do this, it should be what you are looking for:

<a href="http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/" rel="noreferrer">http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/</a>

blocks|key|2016386|text|这看起来是有效的：http://tips4php.net/2010/08/nice-css-text-shadow-effects/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2016387|他使用多个阴影来实现这种效果，如下所述：http://www.w3.org/Style/Examples/007/text-shadow#multiple|2016388|entityMap|0|LINK|mutability|MUTABLE|url|http://tips4php.net/2010/08/nice-css-text-shadow-effects/|1|http://www.w3.org/Style/Examples/007/text-shadow#multiple^0|9|1L|0|0|K|1L|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

This looks like it's working: <a href="http://tips4php.net/2010/08/nice-css-text-shadow-effects/" rel="nofollow noreferrer">http://tips4php.net/2010/08/nice-css-text-shadow-effects/</a>

He's using multiple shadows to achieve that effect as explained here: <a href="http://www.w3.org/Style/Examples/007/text-shadow#multiple" rel="nofollow noreferrer">http://www.w3.org/Style/Examples/007/text-shadow#multiple</a>

blocks|key|1804320|text|似乎每个人都有这个问题的答案。我喜欢@Web_Designer的解决方案。但它不需要那么复杂，你仍然可以得到你正在寻找的模糊的内心阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1804321|http://dabblet.com/gist/3877605|offset|length|1804322|.depth+{
++++display:+block;
++++padding:+50px;
++++color:+black;
++++font:+bold+7em+Arial,+sans-serif;
++++position:+relative;
+}

.depth:before+{
++++content:+attr(title);
++++color:+transparent;
++++position:+absolute;
++++text-shadow:+2px+2px+4px+rgba(255,255,255,0.3);
}|code-block|syntax|javascript|1804323|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

Seems everyone's got an answer to this one. I like the solution from @Web_Designer. But it doesn't need to be as complex as that and you can still get the blurry inner shadow you're looking for.

<a href="http://dabblet.com/gist/3877605" rel="nofollow noreferrer">http://dabblet.com/gist/3877605</a>

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

.depth:before {
 content: attr(title);
 color: transparent;
 position: absolute;
 text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}
</code></pre>

blocks|key|2016886|text|这无疑是我见过的最好的例子。http://lab.simurai.com/carveme/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2016887|来源在gitthub+https://github.com/simurai/lab/tree/gh-pages/carveme上|2016888|entityMap|0|LINK|mutability|MUTABLE|url|http://lab.simurai.com/carveme/|1|https://github.com/simurai/lab/tree/gh-pages/carveme^0|E|V|0|0|B|1G|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

This is easily the best example I have seen.
<a href="http://lab.simurai.com/carveme/" rel="nofollow">http://lab.simurai.com/carveme/</a>

The source is on gitthub
<a href="https://github.com/simurai/lab/tree/gh-pages/carveme" rel="nofollow">https://github.com/simurai/lab/tree/gh-pages/carveme</a>

blocks|key|2017121|text|在web_designer的:before+:after技术的基础上，这里有一些更接近你的外观：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2017122|首先，将文本设置为内部阴影的颜色(在OP中为黑色)。|2017123|现在，使用:after+psuedo类创建一个透明的原始文本副本，直接放在它上面。为其指定无偏移量的常规文本阴影。将原始文本颜色指定给阴影，并根据需要调整alpha。|2017124|http://dabblet.com/gist/2499892|2017125|你不能像在PS中那样完全控制阴影的扩散等，但对于较小的模糊值来说，这是相当不错的。阴影超出了文本的边界，因此如果您在具有高对比度背景-前景的环境中工作，它将是显而易见的。对于对比度较低的项目，特别是具有相同色调的项目，它不太明显。例如，我已经能够使用这种技术在金属背景下制作非常漂亮的蚀刻文本。|2017126|entityMap|0|LINK|mutability|MUTABLE|url^0|E|7|M|6|0|0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|L|3|M|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|K]]]]

Building on the <code>:before</code> <code>:after</code> technique by web_designer, here is something that comes closer to your look:

First, make your text the color of the inner shadow (black-ish in the case of the OP).

Now, use an :after psuedo class to create a transparent duplicate of the original text, placed directly on top of it. Assign a regular text shadow to it with no offset. Assign the original text color to the shadow, and adjust alpha as needed.

<a href="http://dabblet.com/gist/2499892" rel="nofollow">http://dabblet.com/gist/2499892</a>

You don't get complete control over spread, etc. of the shadow like you do in PS, but for smaller blur values it is quite passable. The shadow goes past the bounds of the text, so if you are working in an environment with a high contrast background-foreground, it will be obvious. For lower contrast items, especially ones with the same hue, it's not too noticeable. For example, I've been able to make very nice looking etched text in metal backgrounds using this technique.

blocks|key|1803520|text|下面是使用background-clip+CSS3属性实现真正的嵌入文本阴影的一个很好的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1803521|.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;
}|code-block|syntax|javascript|1803522|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a great solution for TRUE inset text shadow using the background-clip CSS3 property:

<pre><code>.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;
}
</code></pre>

blocks|key|2017520|text|这是我在看了这里的一些想法后想出来的。主要思想是文本的颜色与两种阴影混合，请注意，这是在灰色背景上使用的(否则白色不会很好地显示)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2017521|.inset+{
++++color:+rgba(0,0,0,+0.6);
++++text-shadow:+1px+1px+1px+#fff,+0+0+1px+rgba(0,0,0,0.6);
}|code-block|syntax|javascript|2017522|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's what I came up with after looking at some of the ideas here. The main idea is that the color of the text blends with both shadows, and note that this is being used on a grey background (otherwise the white won't show up well).

<pre><code>.inset {
 color: rgba(0,0,0, 0.6);
 text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}
</code></pre>

blocks|key|1804746|text|用于小尺寸按钮上的正常大小的文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1804747|我发现这个页面上的其他想法在使用带有小文本字母的小按钮时会失去效果。这个答案在RobertPitt's+answer上展开了。|offset|length|1804748|下面是一些小的调整：|1804749|text-shadow:+1px+1px+transparent,+-1px+-1px+black;|code-block|syntax|javascript|1804750|​|1804751|$('button').click(function(){
++$('button').removeClass('btnActive');
++$(this).addClass('btnActive');
});|1804752|body{background:#666;}
.btnActive{
++border:+1px+solid+#aaa;
++border-top:+1px+solid+#333;
++border-left:+1px+solid+#333;
++color:+#ecf0f8;
++background-color:+#293d70;
++background-image:+none;
++text-shadow:+1px+1px+transparent,+-1px+-1px+black;
++outline:none;
}

button{
++border:+1px+solid+#446;
++border-radius:+3px;
++color:+white;
++background-color:+#385499;
++background-image:+linear-gradient(-180deg,##7d94cf,#1c294a+90%25);
++cursor:+pointer;
++font-size:+14px;
++font-weight:+600;
++padding:+6px+12px;
++xxtext-shadow:+1px+1px+2px+navy;
}|1804753|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button+class="btnActive">Option+One</button>
<button>Option+Two</button>|1804754|1804755|注意：|1804756|我使用this+site对色调进行了微调。|1804757|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/4059565|1|https://www.w3schools.com/colors/colors_picker.asp^0|0|13|J|0|0|0|0|0|0|0|0|0|0|3|9|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|U|3|N|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1L|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|Z|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|12|13|14|A|$15|18]]]]

<h1>For normal-sized text on small-ish buttons</h1>
I found the other ideas on this page to lose their efficacy when used on small buttons with small text lettering. This answer expands on <a href="https://stackoverflow.com/a/4059565">RobertPitt's answer</a>.
Here is the minor tweak:
<pre><code>text-shadow: 1px 1px transparent, -1px -1px black;
</code></pre>
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').click(function(){
 $('button').removeClass('btnActive');
 $(this).addClass('btnActive');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{background:#666;}
.btnActive{
 border: 1px solid #aaa;
 border-top: 1px solid #333;
 border-left: 1px solid #333;
 color: #ecf0f8;
 background-color: #293d70;
 background-image: none;
 text-shadow: 1px 1px transparent, -1px -1px black;
 outline:none;
}

button{
 border: 1px solid #446;
 border-radius: 3px;
 color: white;
 background-color: #385499;
 background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
 cursor: pointer;
 font-size: 14px;
 font-weight: 600;
 padding: 6px 12px;
 xxtext-shadow: 1px 1px 2px navy;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button class="btnActive"&gt;Option One&lt;/button&gt;
&lt;button&gt;Option Two&lt;/button&gt;</code></pre>
</div>
</div>

<h3>Note:</h3>
I used <a href="https://www.w3schools.com/colors/colors_picker.asp" rel="nofollow noreferrer">this site</a> to finesse the color shades.

blocks|key|1803579|text|text-shadow:+4px+4px+2px+rgba(150,+150,+150,+1);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1803580|对于长方体阴影：|unstyled|1803581|-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);|1803582|你可以看到在线文本和方框阴影：online+text+and+box+shadow|offset|length|1803583|有关更多示例，请访问以下地址：more+example+code+freeclup|1803584|entityMap|0|LINK|mutability|MUTABLE|url|http://css3gen.com/text-shadow/|1|http://freeclup.com/index.php/en/^0|0|0|0|F|Q|0|0|F|Q|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|F|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|F|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<pre><code>text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
</code></pre>

for box shadow:

<pre><code>-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);
</code></pre>

you can see online text and box shadow:
<a href="http://css3gen.com/text-shadow/" rel="nofollow">online text and box shadow</a>

for more example you can go to this address :
<a href="http://freeclup.com/index.php/en/" rel="nofollow">more example code freeclup</a>

blocks|key|2017303|text|有一种更简单的方法来实现这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2017304|.inner{color:+red;+text-shadow:+0+-1px+0+#666;}+//+#666+is+the+color+of+the+inner+shadow|code-block|syntax|javascript|2017305|瞧！|2017306|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

There's a much simpler way to achieve this 

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

Voilà

blocks|key|2016918|text|我在这个网站上使用它，而且它看起来很好。请看一下Inner+shadow|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2016919|entityMap|0|LINK|mutability|MUTABLE|url|http://www.drewdahlman.com/meusLabs/?p=35^0|O|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I'm using it from this site, also it looks good. Have a look at it <a href="http://www.drewdahlman.com/meusLabs/?p=35" rel="nofollow">Inner shadow</a>

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

<img src="https://i.stack.imgur.com/rw4vf.jpg" alt="">

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

<pre><code>box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
</code></pre>

Any ideas?

Inner text shadow with CSS

我目前正在尝试使用CSS3，并尝试实现这样的文本效果(黑色模糊内阴影)：​​但是我找不到一种在文本中创建文本阴影的方法。我想知道是否仍然有可能，因为box-shadow元素能够像这样渲染内部的阴影：box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);有什么想法吗？

问带有CSS的内部文本阴影
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有CSS的内部文本阴影EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有CSS的内部文本阴影
EN