本文介绍了使用 css 的文本边框(文本周围的边框)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法像下图那样在文本周围集成边框?
Is there a way to integrate a border around text like the image below?
推荐答案
使用多个文本阴影:
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 中有效的文本笔划:
Alternatively, you could use text stroke, which only works in 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 技巧.
Also read more as CSS-Tricks.
这篇关于使用 css 的文本边框(文本周围的边框)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!