129

有没有办法像下图那样在文本周围集成边框？

文字边框

4

5 回答 5

266

使用多个文本阴影：

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 的内容。

于 2012-11-17T03:05:53.233 回答
18

当然。你可以使用 CSS3 text-shadow：

text-shadow: 0 0 2px #fff;

但是它不会立即在所有浏览器中显示。不过，使用Modernizr之类的脚本库将有助于在大多数浏览器中正确使用它。

于 2012-11-17T01:58:17.580 回答
12

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

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

对我来说，最好的解决方案仍然是 SVG，并为旧版浏览器提供非笔触文本的后备：

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

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

于 2017-11-09T18:09:13.713 回答
7 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
于 2015-05-28T10:22:18.233 回答
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 */
于 2012-11-17T02:10:48.923 回答