今天和大家分享css3的阴影文字
css3里的文字阴影属性,text-shadow
语法:text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置。允许负值。
v-shadow:垂直阴影的位置。允许负值。
blur:模糊的距离。可选择不写
color:阴影的颜色。可选择不写
请关注小元的简书
下面我们来实际应用一下(只展示关键代码)
基础文本阴影效果:

代码

效果展示
请关注小元的简书
霓虹灯效果

代码

效果展示
简书搬不完的元猿员
补色3D效果

代码

效果展示
模糊效果

代码

效果展示
text-shadow还有许多其他神奇的用法,有兴趣的小伙伴可以自己开发,以上就是关于阴影文字的分享,更多前端内容请 点击关注
幸运数字晚点在评论区发,谢谢理解
网友评论