手册
目录
text-shadow 属性可以为文本添加阴影效果。
最简单的使用方式是只指定水平方向的阴影(2px)和垂直方向的阴影(2px):
h1
{<br></br>
text-shadow: 2px 2px;<br></br>
}
运行实例 » 点击 "运行实例" 按钮查看在线实例
接下来,为阴影添加颜色(红色):
h1
{<br></br>
text-shadow: 2px 2px red;<br></br>
}
运行实例 » 点击 "运行实例" 按钮查看在线实例
然后,为阴影添加模糊效果(5px):
h1
{<br></br>
text-shadow: 2px 2px 5px red;<br></br>
}
运行实例 » 点击 "运行实例" 按钮查看在线实例
白色文本上的阴影效果:
h1 {<br></br>
color: white;<br></br> text-shadow: 2px 2px 4px #000000;<br></br>}
运行实例 » 点击 "运行实例" 按钮查看在线实例
红色霓虹灯发光效果:
h1 {<br></br>
text-shadow: 0 0 3px #ff0000;<br></br>}
运行实例 » 点击 "运行实例" 按钮查看在线实例
红色和蓝色的霓虹灯发光效果:
h1 {<br></br>
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;<br></br>}
运行实例 » 点击 "运行实例" 按钮查看在线实例
h1 {<br></br>
color: white;<br></br> text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;<br></br>}
运行实例 » 点击 "运行实例" 按钮查看在线实例
提示: 请查看我们的 CSS 字体章节,了解如何更改字体、文本大小和文本样式。
提示: 请查看我们的 CSS 文本效果章节,了解不同的文本效果。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习