css - 文字描边（-webkit-text-stroke）css问题

Question

我正在使用 NextJs 和 TailwindCSS 开展个人项目。

完成项目后，我使用私人导航器查看进度，但似乎笔画无法正常工作，我在除 Chrome 之外的所有浏览器中都遇到了这种情况。

这是我得到的：

这是所需的行为：

代码：

<div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

CSS：

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

有人可以解释或帮助解决这个问题。

浏览器兼容性：

标签： csssassnext.jsfrontendtailwind-css

Answer 1

由于浏览器兼容性-webkit-text-stroke在少数浏览器中不支持。您可以通过使用阴影来实现轮廓效果。

希望这有效！

.outline-title {
font-family: sans-serif;
   color: white;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
      font-size: 50px;
}

<div class="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

----更新---