我试图将Figma设计转换为代码，但它有一些使用内部阴影效果的文本
我try 使用纯文本和剪切文本阴影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/>你可以使用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/>为了获得更好的支持，您可以复制文本并try 以下操作:
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>