使用 css 的文本边框(文本周围的边框) [英] Text border using css (border around text)

问题描述

有没有办法像下图那样在文本周围集成边框?

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 的文本边框(文本周围的边框)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！