文本阴影
text-shadow 偏移/模糊/颜色、多层阴影叠加、发光文字效果
文本阴影
text-shadow 给文字添加阴影——可以做立体字、发光字、多重阴影。
学完本章你将： 掌握 text-shadow 偏移/模糊/颜色、多层阴影。
基本语法
css
/* text-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
.shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }各种效果
css
/* 右下阴影 */
.simple { text-shadow: 2px 2px 4px #999; }
/* 无模糊——硬边阴影 */
.hard { text-shadow: 3px 3px 0 #333; }
/* 发光文字（深色背景） */
.glow {
color: white;
text-shadow: 0 0 10px #fff, 0 0 20px #0ff;
}
/* 霓虹灯效果 */
.neon {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff;
}
/* 3D 立体字 */
.three-d {
color: #333;
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;
}