CSS 文本阴影

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影(2px)和垂直阴影(2px):

文字阴影效果!

实例

h1 {
  text-shadow: 2px 2px;
}

亲自试一试

接下来,向阴影添加颜色(红色):

文字阴影效果!

实例

h1 {
  text-shadow: 2px 2px red;
}

亲自试一试

然后,向阴影添加模糊效果(5px):

文字阴影效果!

实例

h1 {
  text-shadow: 2px 2px 5px red;
}

亲自试一试

提示:请访问 CSS 字体 一章,学习如何更改字体、文本大小和文本样式。

提示:请访问 CSS 文本效果 一章,学习如何实现不同的文本效果。

所有 CSS 文本属性

属性 描述
color 设置文本颜色。
direction 指定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 指定文本的水平对齐方式。
text-decoration 指定添加到文本的装饰效果。
text-indent 指定文本块中首行的缩进。
text-shadow 指定添加到文本的阴影效果。
text-transform 控制文本的大小写。
text-overflow 指定应如何向用户示意未显示的溢出内容。
unicode-bidi 与 direction 属性一起使用,设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align 指定文本的垂直对齐方式。
white-space 指定如何处理元素内的空白。
word-spacing 设置单词间距。

CSS 基础教程

CSS 中级教程

CSS3 高级教程

CSS 响应式设计

CSS 网格教程

CSS 实例

CSS 测验

CSS 参考手册

目录