![cover](https://image.dreamruins.com/images/CSS-text_line_shadow.png)
CSS世界之文字线条阴影
CSS世界之文字线条阴影
效果展示
View Room
实现思路
利用 background-image: linear-gradient(...)
做出线条渐变纹理
然后使用 background-clip
配合 color: transparent
使文字加上纹理,形成视觉阴影效果
实现代码
1 | <div class="text-shadow" data-text="View Room">View Room</div> |
1 | .text-shadow{ |
上面代码所使用的颜色是我主题的颜色,可以根据自己的要求进行替换
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 View Room
评论