一、text-shadow(文字阴影)
1、基础用法:text-shadow: 1px 1px 5px rgb(106, 103, 103);
2、基础参数:
- h-shadow:必需。水平阴影的位置。允许负值。
- v-shadow:必需。垂直阴影的位置。允许负值。
- blur:可选。模糊的距离。
- color:可选。阴影的颜色。
3、常见文本效果
- 基础样式
.c{ text-shadow: 1px 1px 5px rgb(106, 103, 103); }
- 文字描边
有4个阴影时, 可以给文字画一个轮廓:
.b { color: #BBE; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
- 霓虹灯效果
水平值和垂直值为0,适当的添加模糊距离,可以实现霓虹灯效果。
.d {text-shadow: 0 0 0.2em #8F7} .e {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87} .f {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}