text-shadow 的写法和 box-shadow 几乎一样:text-shadow: 2px 2px 4px rgba(0,0,0,.5),但没有扩展半径、也没有 inset。多层阴影叠加可做出立体字(1px 1px 0 浅色,2px 2px 0 深色……依次堆)、描边字(上下左右各一个阴影)和霓虹发光效果。
它在亮色背景上做「浮雕/镂空」效果非常方便:比如白底浅灰文字加白色阴影,立刻有了打凹的质感。相比用图片写标题,纯 CSS 文字阴影可选中、可翻译、SEO 友好。
<style> .neo { color: #fff; text-shadow: 0 0 8px #4a9eff, 0 0 20px #4a9eff88; } .solid { color: #fff; text-shadow: 1px 1px 0 #e78a3e, 2px 2px 0 #e78a3e, 3px 3px 0 #d97706, 4px 4px 6px rgba(0,0,0,.35); } </style> <h3 class="neo">霓虹发光文字</h3> <h3 class="solid">多层堆叠的立体字</h3>