Firefox 中的文本描边和阴影 CSS3答案

【问题标题】：Text Stroke and Shadow CSS3 in FirefoxFirefox 中的文本描边和阴影 CSS3
【发布时间】：2020-05-09 03:09:40
【问题描述】：

我想知道是否有一种方法可以为文本添加描边和阴影，我可以让它在 Chrome 和 Safari 中工作，因为 webkit 支持 text-stroke 和 text-shadow。我可以在 Firefox 中显示中风，但这是使用文本阴影并使用偏移量。那么有人知道解决这个问题的方法吗？

【问题讨论】：

标签： html firefox css

【解决方案1】：

text-stroke 属性不是标准 CSS 规范的一部分，因此最好避免使用它 - Chrome 有权随时将其移除。

您是对的，您可以使用多个以逗号分隔的 text-shadows 创建类似 text-stroke 的效果 - 事实上，您也可以使用相同的技术来添加“实际”阴影：

h1 {
  font-size: 6em;
  font-weight: bold;
  text-shadow: 1px  1px 0   #F00,
              -1px -1px 0   #F00,
               1px -1px 0   #F00,
              -1px  1px 0   #F00,
               3px  3px 5px #333;
}

&lt;h1 style="margin:0"&gt;Hello World&lt;/h1&gt;

不过要小心，因为text-shadow 在 IE9 及更低版本中也不支持。我建议仅将其用于非必要的样式：确保在没有阴影/人造轮廓时文本仍然具有可读性。

【讨论】：

【解决方案2】：

Firefox 48 现在支持文本笔划（带有 -webkit 前缀），以及其他一些特定于 webkit 的属性（如 -webkit-text-fill-color）。请注意该规范实际上并不存在，并且将来可能会发生变化。

这是一个现在可以在 Firefox 中运行的示例：

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}

<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>

查看 Mozilla 网站：

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

【讨论】：