text-shadow 文本阴影
它可以给任意的字符设置 一个 或多个阴影。
1. 官方定义
text-shadow 属性 向文本设置阴影。
2. 解释
text-shadow 一共接受 4 个参数，前两个是阴影的位置通过 x，y坐标系来设定，第三个参数设定模糊的大小，最后 一个 参数设定阴影的颜色。
3. 语法
.demo {
text-shadow : h-shadow v-shadow blur color ;
}
属性 值
值 说明 h-shadow 可选。水平方向阴影位置,以 文字 的中心为起点>0是往右，<0时候偏左。 v-shadow 可选。竖直方向阴影位置， 用法 同上。 blur 可选。模糊的大小。 color 可选。阴影的颜色
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
1.为 文字 添加 阴影。
< div class = " demo " > 网 </ div >
.demo {
text-shadow : px px px red ;
}
效果 图
为 文字 添加 阴影 效果 图
制作 一个 文字 发光 效果 。
html,body {
background : #000 ;
}
.demo {
color : #fff ;
text-shadow : px px px #fff ,-px -px px #fff ,px -px px #fff ,-px px px #fff ;
}
效果 图
制作 一个 文字 发光 效果 效果 图
说明：其实就是在各个方向上都 增加 一个 白色的阴影，在黑色的背景下就显得有发光的 效果 了。
通过投影直至化制作 一个 3D的 文字 效果 。
.demo {
font-size : px ;
color : #fff ;
text-shadow : px px hsl ( ,, ) ,
px px hsl ( ,, ) ,
px px hsl ( ,, ) ,
px px hsl ( ,, ) ,
px px hsl ( ,, ) ,
px px px black ;
}
效果 图
制作 一个 3D的 文字 效果 效果 图
说明：这个 效果 也是利用各种色组叠加来实现的。
6. 经验 分享
首先通过上面的例子我们可以了解到这个 属性 是可以无限制的 增加 一个 颜色组，通过通过这个可以制作出很多有意思的 效果 。例如下雨的圆形光晕等等。
7. 小结
在以前也有 text-shadow:#000 5px 5px 5px 这样的写法，不过不推荐。
word-break 文本打断 ? ?text-overflow 文字超出查看更多关于text-shadow 文本阴影的详细内容...