随着所有新的CSS3边框的出现(-webkit，…)，现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?
当前回答
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
其他回答
我曾经尝试用css3做那些圆角和阴影。后来，我发现它的支持仍然很差(当然是Internet Explorer !)
我最终尝试在JS (HTML canvas与IE canvas)中做到这一点，但它对性能影响很大(甚至在我的C2D机器上)。简而言之，如果你真的需要这种效果，考虑JS库(它们中的大多数应该能够在IE6上运行)，但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR，然后PS它和SFiR它。CSS3今天还没有准备好。
有一个实验性的CSS属性叫做text-stroke，在一些浏览器中被支持在-webkit前缀后面。
h1 { -webkit-text-stroke: 2px黑色;/*宽度和颜色*/ 字体类型:无;颜色:黄色; ｝ <标题> Hello World h1 > < /
另一个可能的技巧是使用四个阴影，在所有方向上每个像素，使用属性text-shadow:
h1 { /* 1像素黑色阴影左，上，右，下*/ 文本阴影:-1px 0黑，0 1px黑，1px 0黑，0 -1px黑; 字体类型:无;颜色:黄色; ｝ <标题> Hello World h1 > < /
但如果厚度超过1个像素，它就会变得模糊。
我将这里提到的所有解决方案进行了比较，以便快速概述:
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
抱歉我迟到了，但是说到文本阴影，我想你也会喜欢这个例子(当我需要好的文本阴影时，我经常使用它):
text-shadow:
-2px -2px lightblue,
-2px -1.5px lightblue,
-2px -1px lightblue,
-2px -0.5px lightblue,
-2px 0px lightblue,
-2px 0.5px lightblue,
-2px 1px lightblue,
-2px 1.5px lightblue,
-2px 2px lightblue,
-1.5px 2px lightblue,
-1px 2px lightblue,
-0.5px 2px lightblue,
0px 2px lightblue,
0.5px 2px lightblue,
1px 2px lightblue,
1.5px 2px lightblue,
2px 2px lightblue,
2px 1.5px lightblue,
2px 1px lightblue,
2px 0.5px lightblue,
2px 0px lightblue,
2px -0.5px lightblue,
2px -1px lightblue,
2px -1.5px lightblue,
2px -2px lightblue,
1.5px -2px lightblue,
1px -2px lightblue,
0.5px -2px lightblue,
0px -2px lightblue,
-0.5px -2px lightblue,
-1px -2px lightblue,
-1.5px -2px lightblue;
为了详细说明已经提到的-webkit-text-stroke的一些答案，下面是使其工作的代码:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
这里有一篇关于使用文本笔画的深入文章，这里有一个支持文本笔画的浏览器列表。
