创建描边和阴影-HTML，CSS

Question

是否可以创建如下图所示的文本？

我能得到的最接近的就是这个CSS：

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 0px 0px red, 3px 3px red;

Answer 1

使用此

div {
  font-family: 'Roboto', sans-serif;
  font-size:50px;
  font-weight: bold;
  color:transparent;
  text-shadow:3px 3px 0 red;
   -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">

<div>LEARN TO CODE</div>

Answer 2

mix-blend-mode的另一个想法是，您可能比text-fill和text-stroke有更好的支持，但是您必须复制文本：

.text {
  font-family: 'Roboto', sans-serif;
  font-size:50px;
  font-weight: bold;
  position:relative;
  display:inline-block;
  letter-spacing:4px;
}
.text::before,
.text::after {
  content:attr(data-text);
}
.text::before {
  color:red;
  position:relative;
  /*offset the red text*/
  top:3px;
  left:3px;
}
.text::after {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  color:#fff; /*use white*/
  /*create the stroke around text*/
  text-shadow:
    1px 0 0 #000,
    0 1px 0 #000,
    1px 1px 0 #000,
    -1px 0 0 #000,
    0 -1px 0 #000,
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000;
  mix-blend-mode: darken; /*means that white on red will give red! */
}

<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">

<div class="text" data-text="LEARN TO CODE"></div>