本次使用的是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;//新增的一行
}
效果如下
[图片上传失败...(image-a0a313-1666927875150)]
这个只是加了一个方向的阴影效果所以咱们把八个方向补全就得到一个空心的文字效果啦 一起实现一下
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;
}
下面是代码片段和最终效果
代码片段
