有没有一种方法可以像下面的图片一样在文本周围集成边框?
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;
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>
或者,您可以使用-webkit-text-stroke,它会修改描边的宽度而不是在文本周围添加额外的阴影,因此产生略微不同的效果。尽管带有webkit
前缀,但截至2022年,它在大多数浏览器中都能正常工作(包括Firefox):
-webkit-text-stroke: 2px #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
-webkit-text-stroke: 2px #fff;
}
<h1>test</h1>
另外,可以在CSS-Tricks上阅读更多相关内容。
当然可以。你可以使用CSS3的text-shadow
属性:
text-shadow: 0 0 2px #fff;
然而,它不会立即在所有浏览器中显示。使用像Modernizr这样的脚本库可以帮助在大多数浏览器中正确显示。
我不太喜欢基于文本阴影的解决方案,它并不是非常灵活,对于8个添加方向的2像素描边可能能够工作,但仅有3像素的描边,方向就会变为16个,因此难以管理。
正确的工具已经存在,它就是 SVG 的 <text>
标签。在这种情况下,浏览器的支持问题毫无意义,因为 text-shadow 的使用也有其自己的支持问题,可以使用 filter: progid:DXImageTransform
或IE 10以下版本,但通常效果不如预期。
对我来说,最佳的解决方案仍然是 SVG,对于旧版浏览器则回退到未描边的文本:
这种方法几乎适用于所有版本的 Chrome 和 Firefox,Safari 版本 3.04 以上,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>
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
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 */