使用 css 的文本边框(文本周围的边框)

有没有一种方法来整合文本周围的边框，如下图所示？

text border

444205 次浏览
小开

当然。你可以用 CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

然而，它不会显示在所有浏览器马上。使用像 现代化这样的脚本库将有助于在大多数浏览器中正确使用它。

小开

以下将涵盖所有值得涵盖的浏览器:

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 */
小开
最佳答案

使用多重文字阴影:

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;

enter image description here

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>

Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit prefix, it works in most browsers (including Firefox) as of 2022:

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

enter image description here

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


h1 {
-webkit-text-stroke: 2px #fff;
}
<h1>test</h1>

Also, read more at CSS-Tricks.

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

我不喜欢那么多基于文本阴影倍增的解决方案，它不是真正的灵活，它可能工作在2像素的笔画方向添加为8，但只有3像素笔画方向变成16，等等..。 管理起来不太舒服。

正确的工具是 SVG <text> 在这种情况下，浏览器的支持问题毫无价值，因为文本阴影的使用也有它自己的支持问题, 可以使用 filter: progid:DXImageTransform或 IE < 10，但通常不能像预期的那样工作。

对我来说，最好的解决方案仍然是 SVG，它为旧版本的浏览器提供了一个备用的非笔画文本:

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

与 text-shadow相比，text-shadow的支持是: Chrome 4.0, FF 3.5, IE10, 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>


提交答案