jquery - <input type ="text"/>中的文字描边

Question

我想在 <input type="text"/> 中使用文字描边我需要它是跨浏览器的(firefox、google chrome、safari、opera、IE7+)。

是否有任何方法可以做到这一点(CSS 2.1、jQuery...)？

Answer 1

我相信他说的是 css 属性 text-stroke (-webkit-text-stroke)。这仅在 webkit 浏览器中得到正确支持，因此在例如 Internet Explorer 中无法正确实现。但是，您可以使用 text-shadow 伪造它 can work in ie7+ .如果你必须在 ie 中包含它。参见 http://css-tricks.com/adding-stroke-to-web-text/

它看起来像:

.stroke_text {
    color: white;
    text-shadow:
          -1px -1px 0 #000,
          1px -1px 0 #000,
          -1px 1px 0 #000,
          1px 1px 0 #000;
}

或内联:

<input type='text' 
       style="color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; width:200px; font-size:20px;" />

这种方法唯一真正的缺点是阴影只能是 1px 或开始看起来很滑稽，所以它不是 text-stroke 的完美复制。也就是说，您可能想要研究条件 css，其中支持它的浏览器使用文本笔画，而其他浏览器使用这种 hacky 方法。