Css 对文本的轮廓效果

发布于02月07日

CSS中有什么方法可以给不同 colored颜色的文本赋予轮廓吗？我想突出我的文本的一些部分，使它更直观-如名称，链接等.改变链接 colored颜色等现在很常见，所以我想要一些新的东西.

推荐答案

在CSS3中有一个名为text-stroke的试验性webkit属性，我已经try 了一段时间，但到目前为止都没有成功.

我所做的是使用已经支持的text-shadow属性(我相信Chrome、Firefox、Opera和IE9都支持).

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

.strokeme {
  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>

我已经制作了for you here个样片

一个悬而未决的例子是available here

正如Jason C在 comments 中提到的，除了Opera Mini之外，所有主要浏览器现在都支持text-shadowCSS属性.如果这个解决方案可以实现向后兼容(对于自动更新的浏览器来说不是真正的问题)，我认为应该使用text-strokeCSS.