CSS字体边框？ | 易学教程

随着所有新的CSS3边框填充（ -webkit ，...），现在是否可以为字体添加边框？（就像蓝色的Twitter徽标周围的纯白色边框一样）。如果不是，是否有任何不太丑陋的骇客会在CSS / XHTML中完成此任务，还是我仍然需要启动Photoshop？

#1楼

要详细说明提到-webkit-text-stroke的一些答案，下面是使它起作用的代码：

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

在深入的文章有关使用文本行程是在这里和浏览器的列表，支持文字笔画是在这里。

#2楼

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

#3楼

我曾经尝试用css3做那些圆角和阴影。后来，我发现它仍然受支持不佳（当然是Internet Explorer！）

我最终尝试在JS（带有IE Canvas的HTML canvas）中执行此操作，但是它对性能的影响很大（即使在我的C2D机器上也是如此）。简而言之，如果您确实需要这种效果，请考虑使用JS库（它们中的大多数应该都可以在IE6上运行），但由于性能问题，请不要过分这样做；如果仍然需要替代方案，则可以使用SFiR，然后使用PS和SFiR。 CSS3今天还没有准备好。

#4楼

似乎有一个“ text-stroke”属性，但（至少对我而言）它仅在Safari中有效。

http://webkit.org/blog/85/introducing-text-stroke/

#5楼

您可能使用CSS text-shadow （或-webkit-text-shadow / -moz-text-shadow ）和非常低的模糊度来模拟文本笔划：

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

但是，尽管它比-webkit-text-stroke属性更广泛地提供，但我怀疑您的大多数用户都可以使用它，但这可能不是问题（优美的降级以及所有这些）。

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3161132

标签

text-shadow

css

webkit