CSS3 词条目录
前端Wiki/词条/text-shadow 文字阴影

text-shadow 文字阴影

定义给文字添加投影,语法 box-shadow 的子集:x y 模糊 颜色,可叠层

text-shadow 的写法和 box-shadow 几乎一样:text-shadow: 2px 2px 4px rgba(0,0,0,.5),但没有扩展半径、也没有 inset。多层阴影叠加可做出立体字(1px 1px 0 浅色,2px 2px 0 深色……依次堆)、描边字(上下左右各一个阴影)和霓虹发光效果。

它在亮色背景上做「浮雕/镂空」效果非常方便:比如白底浅灰文字加白色阴影,立刻有了打凹的质感。相比用图片写标题,纯 CSS 文字阴影可选中、可翻译、SEO 友好。

HTML
<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>
⚠ 常见误区
🔗 相关词条box-shadow 阴影线性渐变
← 返回来源章节实战悬停交互