随着所有新的CSS3边框的出现(-webkit，…)，现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?
当前回答
似乎有一个“文本描边”属性，但(至少对我来说)它只在Safari中有效。
http://webkit.org/blog/85/introducing-text-stroke/
其他回答
你可以使用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属性更广泛地可用，但我怀疑它是否对大多数用户可用，但这可能不是问题(优雅降级，等等)。
这是我正在使用的:
.text_with_1px_border
{
text-shadow:
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000;
}
.text_with_2px_border
{
text-shadow:
/* first layer at 1px */
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
-1px 0px 0px #000,
1px 0px 0px #000,
-1px 1px 0px #000,
0px 1px 0px #000,
1px 1px 0px #000,
/* second layer at 2px */
-2px -2px 0px #000,
-1px -2px 0px #000,
0px -2px 0px #000,
1px -2px 0px #000,
2px -2px 0px #000,
2px -1px 0px #000,
2px 0px 0px #000,
2px 1px 0px #000,
2px 2px 0px #000,
1px 2px 0px #000,
0px 2px 0px #000,
-1px 2px 0px #000,
-2px 2px 0px #000,
-2px 1px 0px #000,
-2px 0px 0px #000,
-2px -1px 0px #000;
}
抱歉我迟到了，但是说到文本阴影，我想你也会喜欢这个例子(当我需要好的文本阴影时，我经常使用它):
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;
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
我将这里提到的所有解决方案进行了比较，以便快速概述:
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
