一尘不染

使用CSS的文字边框(文字周围的边框)

css

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


阅读 1545

收藏
2020-05-16

共1个答案

一尘不染

使用多个文本阴影:

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>
2020-05-16