前端文本描边的使用和创建

1.什么是文本描边

正常情况下，我们的文本是这个样子的

image.png

此时，如果文字颜色和背景颜色一致的话，会导致文字看起来就是消失了一样。

image.png
文字描边呢，就是在文字周围加上一圈描边，可以设置不同的颜色。
image.png

在设计层面，文字的填充和描边如下所示：

image.png
对于描边，我们是可以设置宽度的：
image.png
如果设置fill为none，或者透明，则会出现如下效果
image.png
还可以设置描边的位置
image.png

2.使用css实现

有如下三种方式实现：

• -webkit-text-stroke
• shadow
• 伪元素

1.-webkit-text-stroke

这个属性可以指定描边的宽度和颜色。如下：

h1 {
  -webkit-text-stroke: 3px white;
   color:transparent;
}

-webkit-text-stroke的值是-webkit-text-stroke-width和-webkit-text-stroke-color的简写。
也可以这样写

h1 {
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
   color:transparent;
}

结果如下：

image.png

但是使用这种方式实现的描边，有个不好的地方，描边覆盖在文字上方的，相当于是内嵌，看起来是往内延伸，如果宽度设置的大一点，就会发现文字变得很难看。

image.png
可以通过paint-order属性，将描边放置到文字下方。

paint-order: stroke fill;

结果

image.png

但是如果是在chrom浏览器，需要特殊设置

@supports (-webkit-text-fill-color: white) {
  h1{ {
       color: white;
  }
}

需要注意的是，这个属性不是标准属性，在不同浏览器上，表现是很有可能不一致的。

2.shadow

可以使用text-shadow来实现

h1{
  color:blue;
  text-shadow: 
    1px 0 0 white, /*right */
    0 1px 0 white, /*top */
    -1px 0 0 white, /*left */
    0 -1px 0 white; /*bottom */
}

结果

image.png

可以把offset的值设置成3px，结果如下：

image.png

这种实现方式需要设置很多的阴影才能达到效果，并且fill不能为透明的颜色。

3.伪元素

使用伪元素的话，原理就是在文本下方再创建一个相同的文本，让上面的看起来有了阴影效果。

首先，给元素添加一个自定义的属性，值为文字的内容

<h1 data-text="HI">HI</h1>

然后添加一个伪元素:after

h1 {
  position: relative;
}
h1:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  z-index: -1;
  -webkit-text-stroke: 5px white;
  font-size: 1em;
}

结果如下

image.png