使用 css 的文本边框（文本周围的边框）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13426875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text border using css (border around text)
提问by jho1086
Is there a way to integrate a border around text like the image below?
有没有办法像下图那样在文本周围集成边框？
回答by bookcasey
Use multiple text shadows:
使用多个文本阴影：
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>Alternatively, you could use text stroke, which only works in webkit:
或者，您可以使用仅适用于 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>Also read moreas CSS-Tricks.
另请阅读CSS-Tricks。
回答by jtheman
回答by holden
I don't like that much solutions based on multiplying text-shadows, it's not really flexible, it may work for a 2 pixels stroke where directions to add are 8, but with just 3 pixels stroke directions became 16, and so on... Not really confortable to manage.
我不喜欢那么多基于文本阴影相乘的解决方案，它不是很灵活，它可能适用于 2 像素的笔划，其中添加的方向为 8，但只有 3 像素的笔划方向变为 16，依此类推.. . 管理起来不太舒服。
The right tool exists, it's SVG <text>The browsers' support problem worth nothing in this case, 'cause the usage of text-shadow has its own support problem too,
filter: progid:DXImageTransformcan be used or IE < 10 but often doesn't work as expected.
正确的工具存在，它是 SVG<text>浏览器的支持问题在这种情况下毫无价值，因为 text-shadow 的使用也有其自身的支持问题，
filter: progid:DXImageTransform可以使用或 IE < 10 但通常无法按预期工作。
To me the best solution remains SVG with a fallback in not-stroked text for older browser:
对我来说，最好的解决方案仍然是 SVG，并在旧浏览器的未描边文本中回退：
This kind of approuch works on pratically all versions of Chrome and Firefox, Safari since version 3.04, Opera 8, IE 9
这种方法适用于几乎所有版本的 Chrome 和 Firefox、Safari 自 3.04 版、Opera 8、IE 9
Compared to text-shadowwhose supports are:
Chrome 4.0,
FF 3.5,
IE 10,
Safari 4.0,
Opera 9, it results even more compatible.
与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>回答by chezwhite
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
回答by dtbarne
The following will cover all browsers worth covering:
以下将涵盖所有值得涵盖的浏览器：
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 */
