CSS - 镂空文字方案比对

经过思考梳理了以下三个方案，方案1无疑是最好的，但既然有了方案2和方案3的设想，便姑且也尝试写出来试试效果。

方案一 -webkit-text-stroke,color 或 -webkit-text-fill-color

1）用 -webkit-text-stroke（文字描边） 设置文字描边的粗细和颜色；
2）用 color 将文字颜色设置为透明，或者用 -webkit-text-fill-color 将文字填充为透明色。

<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>

<style>
.embossed-1 {
  font-size: 24px; font-weight: bolder; background: red;
  -webkit-text-stroke: 1px #333;
  -webkit-text-fill-color: transparent;
}
.embossed-2 {
  font-size: 24px; font-weight: bolder; background: yellow;
  -webkit-text-stroke: 1px #333;
  color: transparent;
}
</style>

方案二 text-shadow,mix-blend-mode

1）用 text-shadow 给文字添加阴影，但是因为它没有提供属性来修改阴影的延伸半径（类似box-shadow的第四个参数），所以描边效果不够锋锐；
2）将字体颜色设置为白色，之所以不随方案一设置为透明色，是因为那么做的话，显示出的是文字下方的文字阴影，而非元素下方的东西；
3）用 mix-blend-mode 将文字颜色与下方背景图像进行混合，上一步文字设置的是白色，那么这里混合方式就选darken，这样经过混合计算后显示的就是下方的背景。

<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>
<div class="embossed-3"><div class="text">Hello World</div></div>

<style>
.embossed-1 {
  font-size: 24px; color: #fff;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-2 {
  font-size: 24px; color: #fff; background:red;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 {
  font-size: 24px; color: #fff; background:yellow;
  text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 .text{mix-blend-mode:darken;}
</style>

方案三 :after,transform

1）首先将文本的每个文字都放到一个单独元素中，并用该元素的:after伪元素进行一定的缩放，然后放置到原文字的上方，遮盖住原文字的身体，只漏出所有笔画的边缘部分；
2）:after伪元素的颜色要与文本下方的背景保持一致。

<div class="embossed-1">
  <div class="item" data-text="H">H</div>
  <div class="item" data-text="e">e</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="o">o</div>
  <div class="item" data-text=""></div>
  <div class="item" data-text="W">W</div>
  <div class="item" data-text="o">o</div>
  <div class="item" data-text="r">r</div>
  <div class="item" data-text="l">l</div>
  <div class="item" data-text="d">d</div>
</div>

<style>
.embossed-1 {
  font-size: 24px; font-weight: bolder; color: #fff; background:red;
  display: flex;
}
.embossed-1 .item {
  display: flex; justify-content: center; align-items:center;
  position: relative;
}
.embossed-1 .item:after {
  content: attr(data-text);
  display: flex; justify-content: center; align-items:center;
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  font-weight: normal; color: red; transform:scale(.936);
}
</style>