html 空心字 以及部分艺术字

前几天做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; // 没错这里设置了两个 shadow
  color: 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>

 

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