html - 如何在CSS中为文本创建内阴影效果？

Question

我正在尝试将 Figma 设计转换为代码，但它有一些使用内阴影效果的文本

我尝试使用普通样式并剪切 text-shadow CSS 属性来设置它的样式，但结果与阴影类型剪切/插入文本的设计不太匹配。

h1 {
  font-family: 'Poppins';
    font-style: normal;
    font-size: 80px;
 
    text-align: center;
    
    color: #6225E6;
    text-shadow: -6px 0px 0px #D63737;
    background-color: #151717;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1>This is some text<h1/>

Answer 1

您可以使用 mask 拉近距离(在 Firefox 中不起作用)

h1 {
  font-family: 'Poppins';
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
  color: #0000;
  text-shadow: 
    5px 0  #6225E6,
    0 0  red;
  -webkit-mask: linear-gradient(#000 0 0);
  -webkit-mask-clip: text;
          mask-clip: text;
}

body {
  background:#000;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1>This is some text<h1/>

为了获得更好的支持，您可以复制文本并尝试如下所示:

h1 {
  font-family: 'Poppins';
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
  color: #0000;
  text-shadow: 
    5px 0 #6225E6, 
    0 0 red;
  position: relative;
}

h1:before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  mix-blend-mode: darken;
  text-shadow: none;
}

body {
  background: #000;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1 data-text="This is some text">This is some text</h1>