随着所有新的CSS3边框的出现(-webkit,…),现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有,是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务,或者我仍然需要启动Photoshop?
当前回答
有一个实验性的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个像素,它就会变得模糊。
其他回答
我曾经尝试用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个像素,它就会变得模糊。
你可以使用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-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
为了详细说明已经提到的-webkit-text-stroke的一些答案,下面是使其工作的代码:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
这里有一篇关于使用文本笔画的深入文章,这里有一个支持文本笔画的浏览器列表。