前几天做demo 的时候,遇到了一个需求,就是写一个空心字。想了半天没招,就弄了 网上的资源。
现在想想,加上查资料,感觉还是能实现的
空心字主要使用了 css3 的 text-shadow
效果大概是这样的
上代码:
<style>
.font > p{font-size: 40px;text-shadow: 0 0 2px black; // 使用了 字体阴影,然后把字体颜色调成背景颜色,就是空心字了color: white;
}
</style>
// 这里用到了一些很有意思的标签,有些是以前就知道的,有些是刚知道的,看上面的效果
<div class="font"><p><i>i你猜</i><br> // 斜体<span>span猜不猜</span><br> // 这个就不需要介绍了<strong>strong不猜</strong><br> // 重要文本,也是粗体,和 b 标签的区别可以去查一查<b>b猜</b><br> // 粗体<u>u猜</u><br> // 下划线<big>big猜</big><br> // 大号字体<small>small猜</small><br> // 小号字体<strike>strike猜</strike> // 删除线</p>
</div>
.font2 > p {font-size: 40px;text-shadow: 5px 5px 5px black;color: red;
}
<div class="font2"><p><i>艺术字</i></p>
</div>
没想到吧,还能有空心的 艺术字
.font3 > p {font-size: 40px;text-shadow: 5px 5px 5px black, 0px 0px 2px black; // 没错这里设置了两个 shadowcolor: white;
}
<div class="font3"><p><i>艺术字</i></p>
</div>
这个已经基本上接近 办公软件的 艺术字了吧
.font4 > p {font-size: 40px;text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green;
}
<div class="font4"><p><i>艺术字</i></p>
</div>
还有很多有趣的组合,那些标签也可以一个套一个,可以玩很久的样子。(*^▽^*)