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

问题描述

有没有方法可以在文字周围整合边框，像下面的图片？

解决方案

使用多个文字阴影：

  text-shadow：2px 0 0 #fff，-2px 0 0 #fff，0 2px 0 #fff，0 -2px 0 #fff，1px 1px＃ -1px -1px 0 #fff，1px -1px 0 #fff，-1px 1px 0 #fff; 
  

  body {font-family：无衬线字体;背景：＃222;颜色：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：无衬线字体;背景：＃222;颜色：darkred; } h1 {-webkit-text-stroke-width：2px; -webkit-text-stroke-color：#fff;}  

 < h1> test< / h1>  

另外阅读更多 as CSS-Tricks。

Is there a way to integrate a border around text like the image below?

解决方案

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-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 more as CSS-Tricks.

这篇关于使用css的文本边框（围绕文本的边框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！