今天和大家分享css3的阴影文字
css3里的文字阴影属性,text-shadow
语法:text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置。允许负值。
v-shadow:垂直阴影的位置。允许负值。
blur:模糊的距离。可选择不写
color:阴影的颜色。可选择不写
请关注小元的简书
下面我们来实际应用一下(只展示关键代码)
基础文本阴影效果:
![](https://img.haomeiwen.com/i16562297/a327825074b52c2f.jpg)
代码
![](https://img.haomeiwen.com/i16562297/fdfadd3d14747e75.jpg)
效果展示
请关注小元的简书
霓虹灯效果
![](https://img.haomeiwen.com/i16562297/15b86944a73b97b4.jpg)
代码
![](https://img.haomeiwen.com/i16562297/79356fcc309d88af.jpg)
效果展示
简书搬不完的元猿员
补色3D效果
![](https://img.haomeiwen.com/i16562297/ed34bc2d0b094e68.jpg)
代码
![](https://img.haomeiwen.com/i16562297/583658ed53a938f9.jpg)
效果展示
模糊效果
![](https://img.haomeiwen.com/i16562297/3ea8f345ccba044d.jpg)
代码
![](https://img.haomeiwen.com/i16562297/e74076154f005988.jpg)
效果展示
text-shadow还有许多其他神奇的用法,有兴趣的小伙伴可以自己开发,以上就是关于阴影文字的分享,更多前端内容请 点击关注
幸运数字晚点在评论区发,谢谢理解
网友评论