如何用css实现镂空描边字体

你想要给“5g 产品介绍”白色文字添加描边，可以在css中使用不同的方法。

方法 1：使用文字阴影

text-shadow: 2px 2px 10px white;

这种方法会在文字周围添加一层白色的阴影，模拟出描边的效果。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

方法 2：使用绝对定位

/* 底层字体 */
.white-text {
  position: relative;
  color: white;
}

/* 上层渐变字体 */
.gradient-text {
  position: absolute;
  top: -1px;
  left: -1px;
  -webkit-text-fill-color: transparent; /* safari */
  -webkit-text-stroke-width: 1px; /* safari */
  -webkit-text-stroke-color: black; /* safari */
  text-fill-color: transparent;
  text-stroke-width: 1px;
  text-stroke-color: black;
}

这种方法创建两个字体元素：一个白色底层的实心字体，另一个渐变的空心字体。通过绝对定位和透明填充，空心字体将覆盖白色字体，只显示描边的效果。

延伸应用：黑色描边

如果你还想添加黑色描边，可以在上层字体中添加：

-webkit-text-stroke-color: black; /* Safari */
text-stroke-color: black;

希望这些方法能够帮助你实现css中的字体镂空描边效果。