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

还可以阅读更多 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> 在这种情况下，浏览器的支持问题一文不值，因为使用text-shadow也有其自身的支持问题， filter: progid:DXImageTransform可以使用IE或<10，但通常无法按预期工作。

对我来说，最好的解决方案仍然是SVG，并在较旧的浏览器中保留未描写的文本作为备用：

从3.04版，Opera 8，IE 9版本开始，这种方法通常适用于所有版本的Chrome和Firefox，Safari

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

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

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