使用CSS的文本边框（文本边框）

Question

有没有办法在文字周围整合边框？如下图所示？

Answer 1

使用多个文字阴影：

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

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

或者，您可以使用文本笔划，它仅适用于webkit：

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

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

另外read more作为CSS-Tricks。

Answer 2

不确定。您可以使用CSS3 text-shadow：

text-shadow: 0 0 2px #fff;

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

Answer 3

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

Answer 4

我不喜欢基于倍增文字阴影的那么多解决方案，它不是非常灵活，它可能适用于2像素笔画，其中添加的方向是8，但只有3像素笔画方向变为16，依此类推...... 管理不太舒服。

存在正确的工具，它是SVG <text> 浏览器＆＃39;在这种情况下，支持问题毫无价值，因为text-shadow的使用也有其自身的支持问题， 可以使用filter: progid:DXImageTransform或IE＆lt; 10，但往往没有按预期工作。

对我来说，最好的解决方案仍然是SVG，旧版浏览器的非描边文本可以回退：

这种approuch适用于所有版本的Chrome和Firefox，自3.04版本的Safari，Opera 8，IE 9

与支持的text-shadow相比： Chrome 4.0， FF 3.5， IE 10， Safari 4.0， Opera 9，它的结果更加兼容。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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 */