使用CSS的文字边框（文字周围的边框）

  • Z时代
  • 2024-01-10
  • 分类：问答

有没有办法像下面的图片一样在文本周围集成边框？

回答：

使用多个文本阴影：

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中起作用的文本笔划：

-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的文字边框（文字周围的边框） 的全部内容， 来源链接： utcz.com/qa/434883.html

回到顶部