将文本阴影与文本轮廓结合起来？

Question

我需要用边框和阴影重新创建这个标题。来源是西格玛。有什么想法吗？

我需要用边框和阴影重新创建这个标题。来源是西格玛。

Answer 1

您可以结合使用text-stroke和drop-shadow。请参阅下面标记的代码。

body {
  background-color: #2d2d2d;
}
.text {
  font-family: "Sigmar One", cursive;
  text-align: center;
  width: fit-content;
  line-height: 4rem;
  text-transform: uppercase;
  color: #ffc502;
  font-weight: 900;
  font-size: 4rem;
  -webkit-text-stroke: 2px #720E0E;
  text-stroke: 2px #720e0e;
  filter: drop-shadow(-0.35rem 0.35rem 0rem #a60000);
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap" rel="stylesheet">  
<div class='text'>Rasca<br> y Gana</div>