空心文字效果实现思路

本次使用的是css中的text-shadow做的一个小demo

简单介绍一下text-shadow

text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

参数	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

首先新增一个html文件写入标签h1

<h1>小乐子</h1>  

将body背景设置黑色简单设置一下h1样式、准备工作就完成了

body{
  background-color: #000;
}
h1{
  font-size: 6em;
  color: #000;
}

先小试一下text-shadow在h1中加入一行代码

h1{
  font-size: 6em;
  color: #000;
  text-shadow: 1px 0 #fff;//新增的一行
}

效果如下

这个只是加了一个方向的阴影效果所以咱们把八个方向补全就得到一个空心的文字效果啦 一起实现一下

h1{
  font-size: 6em;
  color: #000;
  text-shadow: 1px 0 #fff,
  1px 1px #fff,
  1px -1px #fff,
  0 1px #fff,
  0 -1px #fff,
  -1px 0 #fff,
  -1px 1px #fff,
 -1px -1px #fff;
}

下面是代码片段和最终效果