css - 对文本的轮廓效果

Question

在 CSS 中有什么方法可以用不同的颜色给文本加上轮廓吗？我想突出显示我的文本的某些部分以使其更直观 - 例如名称、链接等。更改链接颜色等现在很常见，所以我想要一些新的东西。

Answer 1

有一个名为 text-stroke 的实验性 webkit 属性在 CSS3 中，我一直试图让它工作一段时间，但到目前为止一直没有成功。

我所做的是使用已经支持的 text-shadow属性(我相信在 Chrome、Firefox、Opera 和 IE 9 中受支持)。

使用四个阴影来模拟描边文字:

.strokeme {
  color: white;
  background-color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

我做了个demo for you here

悬停示例是 available here

---

正如 Jason C 在评论中提到的，text-shadow CSS 属性现在被所有主流浏览器支持，Opera Mini 除外。如果此解决方案适用于向后兼容(对于自动更新的浏览器来说并不是真正的问题)，我相信应该使用 text-stroke CSS。