2023-07-22 10:00:03

CSS字体边框?

随着所有新的CSS3边框的出现(-webkit,…),现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有,是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务,或者我仍然需要启动Photoshop?


当前回答

我曾经尝试用css3做那些圆角和阴影。后来,我发现它的支持仍然很差(当然是Internet Explorer !)

我最终尝试在JS (HTML canvas与IE canvas)中做到这一点,但它对性能影响很大(甚至在我的C2D机器上)。简而言之,如果你真的需要这种效果,考虑JS库(它们中的大多数应该能够在IE6上运行),但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR,然后PS它和SFiR它。CSS3今天还没有准备好。

其他回答

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; 
}

这里有一篇关于使用文本笔画的深入文章,这里有一个支持文本笔画的浏览器列表。

有一个实验性的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今天还没有准备好。

似乎有一个“文本描边”属性,但(至少对我来说)它只在Safari中有效。

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