CSS字体边框？
随着所有新的CSS3边界的东西继续（ -webkit ，...）现在可以添加一个边界到你的字体？ （就像蓝色Twitter标志周围的纯白色边框一样）。 如果没有，那么在CSS / XHTML中是否会有任何不太难看的黑客入侵，还是需要启动Photoshop？
正确的答案是：
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}<h1>Hello World</h1>UPDATE
这是一个SCSS mixin来生成描边：http://codepen.io/pixelass/pen/gbGZYL
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color
/// @return {List} - text-shadow list
@function stroke($stroke, $color) {
$shadow: ();
$from: $stroke*-1;
@for $i from $from through $stroke {
@for $j from $from through $stroke {
$shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
}
}
@return $shadow;
}
/// Stroke font-character
/// @param {Integer} $stroke - Stroke width
/// @param {Color} $color - Stroke color
/// @return {Style} - text-shadow
@mixin stroke($stroke, $color) {
text-shadow: stroke($stroke, $color);
}
是的老问题..接受（和好的）答案..
但...如果有人需要这个，并且不喜欢打字代码...
这是一个带有CrossBrowser支持的2px黑色边框（不是IE）我需要这个@fontface字体，所以它需要比先前看到的答案更清晰......我采用每个边按照像素来确保（几乎）没有“模糊“（handrawn或类似的）字体。 可以添加子像素（0.5像素），但我不需要它。
长码只是边界？ ...是！！！
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000,
0px 1px 0 #000,
0px -1px 0 #000,
-1px 0px 0 #000,
1px 0px 0 #000,
2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000,
0px 2px 0 #000,
0px -2px 0 #000,
-2px 0px 0 #000,
2px 0px 0 #000,
1px 2px 0 #000,
-1px 2px 0 #000,
1px -2px 0 #000,
-1px -2px 0 #000,
2px 1px 0 #000,
-2px 1px 0 #000,
2px -1px 0 #000,
-2px -1px 0 #000;
你也许可以使用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属性更广泛，但我怀疑它对大多数用户是可用的，但这可能不是问题（正常降级，以及所有这些）。
上一篇: CSS Font Border?