一些頁面會有一些凹凸文字效果，這個主要是設定背景 文字陰影來達成這個效果的。文字陰影使用方法如下：
text-shadow: 水準位置 垂直位置 模糊距離 陰影顔色 具體代碼如下：
body {
background-color: grey;
}
div {
color: grey;
font-size: 200px;
font-family: "微軟雅黑";
}
div:first-child {
/* text-shadow: 水準位置 垂直位置 模糊距離 陰影顔色 */
text-shadow: 1px 1px 2px black, -1px -1px 2px white;
}
div:last-child {
text-shadow: 1px 1px 2px white, -1px -1px 2px black;
}
<body>
<div>凸起</div>
<div>凹陷</div>
</body>
結果如下圖所示
将文本上方陰影設為亮色，下方陰影設為暗色則是凸起效果
上方陰影設為暗色，下方陰影設為亮色則是凹陷效果
更多專業前端知識，請上 【猿2048】www.mk2048.com
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)