一些頁面會有一些凹凸文字效果，這個主要是設置背景+文字陰影來達成這個效果的。文字陰影使用方法如下：
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>
結果如下圖所示
將文本上方陰影設為亮色，下方陰影設為暗色則是凸起效果
上方陰影設為暗色，下方陰影設為亮色則是凹陷效果