html - Firefox 中的文本描边和阴影 CSS3

Question

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

Answer 1

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

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

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;
}

<h1 style="margin:0">Hello World</h1>

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

Answer 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