How to implement inner shadow of text?

Question

Can text shadow be realized with text-shadow? So how to display the inner shadow of text?

Answer 1

The key point is to use RGBA transparent color to simulate the inner shadow effect of the font.

body{
background:#fff;
}
.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

The principle is very simple, text-shadow is always under the font, so use text-shadow's multiple shadows to first simulate the effect of embedded shadows under the solid color of the font, and then, by changing the transparency of the font Lower it to simulate the shadow within the font. Of course, this kind of simulation has limitations. For example, the background color and simulated shadow must be the same, otherwise it will be confusing, haha. Secondly, it will not work in browsers that do not support RGBA, and a default color must be added on top of RGBA to ensure that old browsers can at least display solid colors:

.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

Finally, if you select the above paragraph The text of the example is clearly blurred. This has been mentioned before, because the effect of multiple shadows is still effective when selected, so for the readability of the text, the text shadow when selected should be removed.

::-moz-selection{
text-shadow:none;
}
::selection{
text-shadow:none;
}