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

有没有一种方法可以像下面的图片一样围绕文本进行边界整合？

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> 

Answer 2

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

 text-shadow: 0 0 2px #fff; 

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

Answer 3

以下内容将涵盖所有值得涵盖的浏览器：

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

Answer 4

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

Answer 5

我不喜欢那种基于乘法文本阴影的解决scheme，它不是真的很灵活，它可能适用于添加方向为8的2像素的笔画，但只有3像素的笔画方向变为16，依此类推。不是真正舒适的pipe理。

正确的工具存在，这是SVG <text>在这种情况下，浏览器的支持问题没有任何价值，因为文本阴影的使用也有它自己的支持问题， filter: progid:DXImageTransform可以使用或IE <10，但经常不按预期工作。

对我来说，最好的解决scheme仍然是SVG，在较旧的浏览器中使用未抚摸的文本进行回退：

这种approuch实际上适用于所有版本的Chrome和Firefox，自3.04版Safari，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>