html 空心字以及部分艺术字

2024-07-11 23:02| 来源: 网络整理| 查看: 265

前几天做demo 的时候，遇到了一个需求，就是写一个空心字。想了半天没招，就弄了网上的资源。

现在想想，加上查资料，感觉还是能实现的

空心字主要使用了 css3 的 text-shadow

效果大概是这样的

上代码：

.font > p{ font-size: 40px; text-shadow: 0 0 2px black; // 使用了字体阴影，然后把字体颜色调成背景颜色，就是空心字了 color: white; } // 这里用到了一些很有意思的标签，有些是以前就知道的，有些是刚知道的，看上面的效果

i你猜 // 斜体 span猜不猜 // 这个就不需要介绍了 strong不猜 // 重要文本，也是粗体，和 b 标签的区别可以去查一查 b猜 // 粗体 u猜 // 下划线 big猜 // 大号字体 small猜 // 小号字体 strike猜 // 删除线

.font2 > p { font-size: 40px; text-shadow: 5px 5px 5px black; color: red; }

艺术字

没想到吧，还能有空心的艺术字

.font3 > p { font-size: 40px; text-shadow: 5px 5px 5px black, 0px 0px 2px black; // 没错这里设置了两个 shadow color: white; }

艺术字

这个已经基本上接近办公软件的艺术字了吧

.font4 > p { font-size: 40px; text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green; }

艺术字

还有很多有趣的组合，那些标签也可以一个套一个，可以玩很久的样子。(*^▽^*)

【本文地址】

今日新闻