文字效果（使用 text-shadow）

text-shadow

text-shadow 属性向文本设置阴影。
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

凹凸效果

出现在底部的浅色投影会让人产生物体是凹进平面内的错觉。同理，出现在底部的暗色投影会让人产生物体从平面上突起的错觉。使用text-shadow就可以产生以上的效果。

使用text-shadow前的效果：

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
}

27.1.png
使用text-shadow之后（浅色投影，会感觉凹进去了）：

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
	text-shadow: 0 1px 1px hsla(0, 0%,100%,.8);
}

27.2.png
使用暗色投影，感觉凸出来了：

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
	text-shadow: 0 1px 1px hsla(0, 100%,0%,.8);
}

27.3.png

空心字效果

使用text-shadow还可以产生空心字效果，使用前：

div {
	width: 2em;
	height: 1.5em;
	text-align: center;
	background: deeppink;
	color: #fff;
}

27.4.png
使用后：

div {
	width: 2em;
	height: 1.5em;
	text-align: center;
	background: deeppink;
	color: #fff;
	// 下面两种二选一，都可以
	text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;	
	text-shadow: 1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;
}

27.5.png

文字发光效果

还可以通过设置几层重叠text-shadow来实现文字发光效果。

div {
	width: 2.5em;
	height: 1.5em;
	text-align: center;
	background: #203;
	color: #ffc;
	text-shadow: 0 0 .1em, 0 0 .3em;
}

使用text-shadow前后：
27.6.png
27.7.png

还可以使用动画，更加炫酷：

div {
	width: 2.5em;
	height: 1.5em;
	text-align: center;
	background: #203;
	color: #fff;
	transition: 1s;
}
div:hover {
	text-shadow: 0 0 .1em, 0 0 .3em;
}

更强烈的文字突起效果

使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变按，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果：

div {
	width: 3em;
	height: 1.5em;
	text-align: center;
	background: #58a;
	color: #fff;
	text-shadow: 
		0 1px hsl(0,0%,85%),
		0 2px hsl(0,0%,80%),
		0 3px hsl(0,0%,75%),
		0 4px hsl(0,0%,70%),
		0 5px hsl(0,0%,65%),
		0 5px 10px black;
}

27.8..png
还可以把所有的投影都设成黑色，并且去掉最底层的投影，就可以模拟出一种在复古标志牌中常见的文字效果。

div {
	width: 3.5em;
	height: 1.5em;
	text-align: center;
	background: hsl(0, 50%, 45%);
	color: #fff;
	text-shadow: 
		1px 1px black, 2px 2px black, 
		3px 3px black, 4px 4px black, 
		5px 5px black, 6px 6px black, 
		7px 7px black, 8px 8px black;
}

27.9.png
最后要注意的是，使用太多的效果也会影响性能，这需要在具体的情景下进行权衡。