使用CSS设置文本边框（围绕文本的边框）

Question

有没有一种方法可以像下面的图片一样在文本周围集成边框？

- jho1086

Answer 1

使用多个文本阴影：

text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

<h1>test</h1>

或者，您可以使用-webkit-text-stroke，它会修改描边的宽度而不是在文本周围添加额外的阴影，因此产生略微不同的效果。尽管带有webkit前缀，但截至2022年，它在大多数浏览器中都能正常工作（包括Firefox）：

-webkit-text-stroke: 2px #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  -webkit-text-stroke: 2px #fff;
}

<h1>test</h1>

另外，可以在CSS-Tricks上阅读更多相关内容。

- bookcasey

---

值得注意的是：请测试这些方法的跨浏览器兼容性... 我在至少IE 9上遇到了严重的客户问题...有点想走PNG的路线。 - ErickBest

@ErickBest 第二个链接确实提到了IE9的问题。不过这个页面在谷歌上并不难找，http://caniuse.com/css-textshadow。 - AnnanFay

使用 rgba（红绿蓝透明度） 会导致文本显示不佳。 - alejnavab

Answer 2

当然可以。你可以使用CSS3的text-shadow属性:

text-shadow: 0 0 2px #fff;

然而，它不会立即在所有浏览器中显示。使用像Modernizr这样的脚本库可以帮助在大多数浏览器中正确显示。

- jtheman

---

我已经尝试过了，但我需要的是文字周围的纯白色。 - jho1086

Answer 3

我不太喜欢基于文本阴影的解决方案，它并不是非常灵活，对于8个添加方向的2像素描边可能能够工作，但仅有3像素的描边，方向就会变为16个，因此难以管理。

正确的工具已经存在，它就是 SVG 的 <text> 标签。在这种情况下，浏览器的支持问题毫无意义，因为 text-shadow 的使用也有其自己的支持问题，可以使用 filter: progid:DXImageTransform 或IE 10以下版本，但通常效果不如预期。

对我来说，最佳的解决方案仍然是 SVG，对于旧版浏览器则回退到未描边的文本：

这种方法几乎适用于所有版本的 Chrome 和 Firefox，Safari 版本 3.04 以上，Opera 8, IE 9。

与支持情况为：

Chrome 4.0， FF 3.5， IE 10， Safari 4.0， Opera 9 的 text-shadow 相比，它的兼容性更好。

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

- holden

---

谢谢你分享解决方案。我认为你是对的，它更灵活。但大多数情况下使用CSS更有效率。我以后会尝试使用SVG。 - jho1086

我尝试按照您的建议去做，但这并不实际。 SVG需要准确知道大小、视口框和所有其他普通文本和块所具有的选项。 此外，它仅适用于相对于文本大小较小的描边，例如16px的文本，3px基本上会删除填充。 - II ARROWS

这个解决方案还有一个问题，它只适用于大文本，如果我使用小文本，比如12或16像素，边框会覆盖整个文本。 - stramin

Answer 4

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

- chezwhite

---

你能否也加上一个解释？ - Robert

稍微调整一下，使用深灰色＃444，并在0 0处添加另一个文本阴影对我很有效。 - danday74

Answer 5

以下将涵盖所有值得关注的浏览器：

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

- dtbarne